add note

login.html

@@ -1,69 +1,118 @@
-{% extends "page.html" %}
+{% extends "page.html" %} {% block stylesheet %}
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+  }
+  .container {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #f9f9f9;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  }
+  h1,
+  h2,
+  h3 {
+    color: #2c3e50;
+  }
+  .center-align {
+    text-align: center;
+  }
+  .left-align {
+    text-align: left;
+  }
+  .login-form {
+    margin-top: 20px;
+    padding: 20px;
+    background-color: #ffffff;
+    border-radius: 8px;
+  }
+</style>
+{% endblock %} {% block site %}
+<div id="jupyter-main-app" class="container">
+  <div class="center-align">
+    <h1>Welcome to the ColPali Fine-tuning Space</h1>
+  </div>
 
+  <div class="left-align">
+    <h2>About This Space</h2>
+    <p>
+      This Space allows you to run a Jupyter notebook for fine-tuning ColPali
+      without needing to setup anything. To use this Space, you will need a
+      Hugging Face account and then you can duplicate the Space to your account.
+    </p>
+    <p>
+      <strong>Note:</strong> GPU spaces are charged by the minute. The cost will
+      be shown when you go to duplicate the space. Currently, the notebook won't
+      be saved on restarts unless you enable persistent storage for your space.
+    </p>
+  </div>
 
-{% block stylesheet %}
-{% endblock %}
+  <div class="center-align">
+    <h2>Getting Started</h2>
+    <p>
+      To use this Space and access the ColPali fine-tuning notebook, please
+      duplicate it to your account:
+    </p>
+    <a
+      class="duplicate-button"
+      style="display: inline-block"
+      target="_blank"
+      href="https://huggingface.co/spaces/{{repo_owner}}/{{repo_name}}?duplicate=true"
+    >
+      <img
+        style="margin: 0"
+        src="https://img.shields.io/badge/-Duplicate%20Space-blue?labelColor=white&style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&logoWidth=14"
+        alt="Duplicate Space"
+      />
+    </a>
+  </div>
 
-{% block site %}
+  {% if login_available %}
+  <div class="login-form center-align">
+    <h2>Log In</h2>
+    <p>The default token is <span style="color: orange">huggingface</span></p>
+    <form
+      action="{{base_url}}login?next={{next}}"
+      method="post"
+      class="form-inline"
+    >
+      {{ xsrf_form_html() | safe }}
+      <label for="password_input"><strong>Token:</strong></label>
+      <input
+        type="password"
+        name="password"
+        id="password_input"
+        class="form-control"
+      />
+      <button type="submit" class="btn btn-primary" id="login_submit">
+        Log in
+      </button>
+    </form>
+  </div>
+  {% else %}
+  <div class="center-align">
+    <p>No login available. You shouldn't be seeing this page.</p>
+  </div>
+  {% endif %}
 
-<div id="jupyter-main-app" class="container">
-    
-    <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face Logo">
-    <h4>You must duplicate this Space to use it.</h4>
-    <br>
-    <a class="duplicate-button" style="display:inline-block" target="_blank" href="https://huggingface.co/spaces/DockerTemplates/jupyterlab?duplicate=true">     
-    <img style="margin: 0" src="https://img.shields.io/badge/-Duplicate%20Space-blue?labelColor=white&amp;style=flat&amp;logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&amp;logoWidth=14" alt="Duplicate Space"></a>
-    <br>
-    <br>
-    <h4>The default token is <span style="color:orange;">huggingface</span></h4>
-    <h4>Duplicate the Space to run your own instance</h4>
-  
-    {% if login_available %}
-    {# login_available means password-login is allowed. Show the form. #}
-    <div class="row">
-        <div class="navbar col-sm-8">
-            <div class="navbar-inner">
-                <div class="container">
-                    <div class="center-nav">
-                        <form action="{{base_url}}login?next={{next}}" method="post" class="navbar-form pull-left">
-                            {{ xsrf_form_html() | safe }}
-                            {% if token_available %}
-                            <label for="password_input"><strong>{% trans %}Token:{% endtrans
-                                    %}</strong></label>
-                            {% else %}
-                            <label for="password_input"><strong>{% trans %}Password:{% endtrans %}</strong></label>
-                            {% endif %}
-                            <input type="password" name="password" id="password_input" class="form-control">
-                            <button type="submit" class="btn btn-default" id="login_submit">{% trans %}Log in{% endtrans
-                                %}</button>
-                        </form>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    {% else %}
-    <p>{% trans %}No login available, you shouldn't be seeing this page.{% endtrans %}</p>
-    {% endif %}
-    <p>This template was created by <a href="https://twitter.com/camenduru" target="_blank" >camenduru</a> and <a href="https://huggingface.co/nateraw" target="_blank" >nateraw</a>, with contributions of <a href="https://huggingface.co/osanseviero" target="_blank" >osanseviero</a> and <a href="https://huggingface.co/azzr" target="_blank" >azzr</a> </p>
-    {% if message %}
-    <div class="row">
-        {% for key in message %}
-        <div class="message {{key}}">
-            {{message[key]}}
-        </div>
-        {% endfor %}
-    </div>
-    {% endif %}
-    {% if token_available %}
-    {% block token_message %}
-    
-    {% endblock token_message %}
-    {% endif %}
+  <div
+    class="center-align"
+    style="font-size: 0.8em; color: #888; margin-top: 20px"
+  >
+    <p>
+      This template was created by
+      <a href="https://twitter.com/camenduru" target="_blank">camenduru</a> and
+      <a href="https://huggingface.co/nateraw" target="_blank">nateraw</a>, with
+      contributions from
+      <a href="https://huggingface.co/osanseviero" target="_blank"
+        >osanseviero</a
+      >
+      and <a href="https://huggingface.co/azzr" target="_blank">azzr</a>
+    </p>
+  </div>
 </div>
-
 {% endblock %}
-
-
-{% block script %}
-{% endblock %}