{% 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>
    <p>
      The notebook used in this Space comes from the
      <a
        href="https://github.com/tonywu71/colpali-cookbooks/blob/main/examples/finetune_colpali.ipynb"
        target="_blank"
        >ColPali Cookbooks GitHub repository</a
      >, authored by
      <a href="https://huggingface.co/tonywu71" target="_blank">Tony Wu</a>.
    </p>
  </div>

  <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/davanstrien/jupyterlab-notebook-template?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>
    <p style="margin-top: 10px; font-style: italic; color: #666">
      Note: After duplicating, the space might take a few minutes to build
      before it's ready to use.
    </p>
  </div>

  <div class="center-align" style="margin-top: 20px">
    <a href="https://github.com/tonywu71/colpali-cookbooks" target="_blank">
      <img
        src="https://img.shields.io/badge/ColPali_Cookbooks-100000?style=for-the-badge&logo=github&logoColor=white"
        alt="GitHub"
      />
    </a>
    <a href="https://arxiv.org/abs/2407.01449" target="_blank">
      <img
        src="https://img.shields.io/badge/arXiv-2407.01449-b31b1b.svg?style=for-the-badge"
        alt="arXiv"
      />
    </a>
    <a href="https://huggingface.co/vidore" target="_blank">
      <img
        src="https://img.shields.io/badge/Vidore-FFD21E?style=for-the-badge&logo=huggingface&logoColor=000"
        alt="Hugging Face"
      />
    </a>
    <a
      href="https://x.com/tonywu_71/status/1809183824464560138"
      target="_blank"
    >
      <img
        src="https://img.shields.io/badge/Thread-%23000000?style=for-the-badge&logo=X&logoColor=white"
        alt="X"
      />
    </a>
  </div>

  {% 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
    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 %}