my_spawner.html

<style>
input[type="range"] {
    display: inline;
    width: 40%;
}

output {
    display: inline;
    width: 20%;
}
</style>

<p> &nbsp </p>
<div class="text-center" style="width: 100%; text-align: center">
<details open>
    <summary> 
    <p style="font-size: 150%; text-align: left">Advanced Options </p>
    </summary>
    <p>Click the slider to adjust values; once clicked arrow keys can be used</p>

    <div style="margin-right: 20%; margin-left: 20%;">
    <p>
    <label for="gpus">GPUs </label> max 4
    <br/>
    <input type="range" name="gpus" value="0" min="0" max="4" oninput="this.nextElementSibling.value = this.value"/>
    <output> default 0 </output>
    </p>
    
    <p>
    <label for="gputype">GPU type</label>
    <br/>
    <select name="gputype" style="display: inline">
    <option value="" selected="selected">Any</option>
    <option value="NVIDIA-GeForce-GTX-1080">NVIDIA-GeForce-GTX-1080</option>
    <option value="NVIDIA-GeForce-GTX-1080-Ti">NVIDIA-GeForce-GTX-1080-Ti</option>
    <option value="NVIDIA-GeForce-RTX-2080-Ti">NVIDIA-GeForce-RTX-2080-Ti</option>
    <option value="NVIDIA-GeForce-RTX-3090">NVIDIA-GeForce-RTX-3090</option>
    <option value="NVIDIA-A10">NVIDIA-A10 Tensorcore</option>
    <option value="NVIDIA-L40">NVIDIA-L40-48GB</option>
    <option value="NVIDIA-A100-PCIE-40GB-MIG-2g.10gb">NVIDIA-A100-PCIE-40GB-MIG-2g.10gb</option>    
    <option value="NVIDIA-A100-SXM4-80GB">NVIDIA-A100-SXM4-80GB</option>
    </select>
    </p>
    
    <p> &nbsp </p>
    
    <p>
    <label for="cores">Cores </label> max 128
    <br/>
    <input type="range" name="cores" value="8" min="4" max="128" step="4" oninput="this.nextElementSibling.value = this.value"/>
    <output> default 8 </output>
    </p>
    
    <p> &nbsp </p>
    
    <p>
    <label for="ram">RAM, GB </label> max 256
    <br/>
    <input type="range" name="ram" value="16" min="16" max="256" step="8" oninput="this.nextElementSibling.value = this.value"/>
    <output> default 16 </output>
    </p>    
    </div>
</details>
</div>
<br/>

         <div class='form-group' id='kubespawner-profiles-list'>
          <p>Refer to the <a href="https://docs.nrp.ai/userdocs/running/sci-img/">documentation</a> for images description.</p>

          <label>Image</label>
          {%- for profile in profile_list %}
            {#- Wrap everything in a label tag so clicking anywhere selects the option #}
            <label for="profile-item-{{ profile.slug }}"
                  class="profile js-profile-label">
              <div class="radio">
                <input type="radio"
                      name="profile"
                      id="profile-item-{{ profile.slug }}"
                      value="{{ profile.slug }}"
                      {% if profile.default %}checked{% endif %} />
              </div>
              <div>
                <h3>{{ profile.display_name }}</h3>
                {%- if profile.description %}<p>{{ profile.description }}</p>{%- endif %}
                {%- if profile.profile_options %}
                  <div>
                    {%- for k, option in profile.profile_options.items() %}
                      <div class="js-options-container">
                        <div class="option">
                          <label for="profile-option-{{ profile.slug }}--{{ k }}"
                                class="js-profile-option-label">{{ option.display_name }}</label>
                          <select name="profile-option-{{ profile.slug }}--{{ k }}"
                                  class="form-control js-profile-option-select">
                            {%- for k, choice in option['choices'].items() %}
                              <option value="{{ k }}" {% if choice.default %}selected{% endif %}>{{ choice.display_name }}</option>
                            {%- endfor %}
                            {%- if option['unlisted_choice']['enabled'] %}
                              <option value="unlisted-choice">{{ option['unlisted_choice']['display_name_in_choices'] }}</option>
                            {%- endif %}
                          </select>
                        </div>
                        {%- if option['unlisted_choice']['enabled'] %}
                          <div class="option hidden js-other-input-container">
                            <label for="profile-option-{{ profile.slug }}--{{ k }}--unlisted-choice">
                              {{ option['unlisted_choice']['display_name'] }}
                            </label>
                            <input data-name="profile-option-{{ profile.slug }}--{{ k }}--unlisted-choice"
                                  {%- if option['unlisted_choice']['validation_regex'] %}
                                  pattern="{{ option['unlisted_choice']['validation_regex'] }}"
                                  {%- endif %}
                                  title="{{ option['unlisted_choice']['validation_message'] }}"
                                  class="form-control js-other-input" />
                          </div>
                        {%- endif %}
                      </div>
                    {%- endfor %}
                  </div>
                {%- endif %}
              </div>
            </label>
          {%- endfor %}
          </div>


<div id="note:">
    <span style="color: tomato"><i>Important Note:</i></span>
    <i>When this server is longer needed, or if you want to launch a different stack, please stop it as follows:</i>
    <span style="color:SlateBlue;"><i>Go to File > Hub Control Panel > Stop Server<i></span>
</div>