docker: Colab-grade JupyterLab and Studio UX for the Unsloth image #6681
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| #!/usr/bin/env python3 | ||
| """Install the Unsloth Studio sloth stickers for the JupyterLab login screen. | ||
|
|
||
| The branded login page (login.html) shows a different sloth sticker on each | ||
| visit, the same curated set Studio offers as profile avatars. The PNGs live in | ||
| the Studio frontend (`studio/frontend/public/Sloth emojis/`), which is present | ||
| in the studio image after install.sh runs. This copies the curated subset into | ||
| jupyter_server's static dir as `sloth/01.png .. sloth/20.png` so the template | ||
| can reference stable, space-free, auth-free URLs via `static_url(...)`. | ||
|
|
||
| Usage: | ||
| install_sloth_stickers.py --src "<Sloth emojis dir>" --dest "<static>/sloth" | ||
|
|
||
| Fail-soft: a missing source file is skipped (login.html's onerror falls back to | ||
| the Unsloth logo), and the script still exits 0 as long as at least one sticker | ||
| was installed. Stdlib only. | ||
| """ | ||
|
|
||
| import argparse | ||
| import os | ||
| import shutil | ||
| import sys | ||
|
|
||
| # Curated, in display order -> NN.png. Mirrors Studio's SLOTH_AVATARS | ||
| # (frontend/src/features/profile/sloth-avatars.ts): the square, low-whitespace | ||
| # stickers that frame cleanly. Kept in sync by hand; missing names are skipped. | ||
| CURATED = [ | ||
| "large sloth yay.png", | ||
| "large sloth heart.png", | ||
| "large sloth wave.png", | ||
| "large sloth thumbs.png", | ||
| "large sloth cheeky.png", | ||
| "large sloth glasses.png", | ||
| "large sloth fire.png", | ||
| "large sloth drink.png", | ||
| "large sloth sad.png", | ||
| "Large sloth Question mark.png", | ||
| "sloth shy large.png", | ||
| "sloth shock large.png", | ||
| "sloth sir large.png", | ||
| "sloth huglove large.png", | ||
| "sloth headphones.png", | ||
| "sloth pc square.png", | ||
| "sloth on phone.png", | ||
| "sloth magnify final.png", | ||
| "Sloth loca pc.png", | ||
| "UnSloth GPU Front square.png", | ||
| ] | ||
|
|
||
|
|
||
| def main() -> int: | ||
| parser = argparse.ArgumentParser(description = __doc__) | ||
| parser.add_argument("--src", required = True, help = "Studio 'Sloth emojis' dir") | ||
| parser.add_argument("--dest", required = True, help = "output dir (static/sloth)") | ||
| args = parser.parse_args() | ||
|
|
||
| os.makedirs(args.dest, exist_ok = True) | ||
| installed = 0 | ||
| for index, name in enumerate(CURATED, start = 1): | ||
| source = os.path.join(args.src, name) | ||
| target = os.path.join(args.dest, "%02d.png" % index) | ||
| if not os.path.isfile(source): | ||
| print(" skip (missing): %s" % name) | ||
| continue | ||
| try: | ||
| shutil.copyfile(source, target) | ||
| installed += 1 | ||
| except OSError as error: | ||
| print(" skip (%s): %s" % (error, name)) | ||
|
|
||
| print("installed %d/%d sloth stickers into %s" % (installed, len(CURATED), args.dest)) | ||
| # Non-fatal: the login page degrades to the logo if none were installed, but | ||
| # a totally empty copy usually means a wrong --src, so signal that. | ||
| return 0 if installed else 1 | ||
|
|
||
|
|
||
| if __name__ == "__main__": | ||
| sys.exit(main()) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| {# Unsloth-branded JupyterLab login page. Overwrites jupyter_server's default | ||
| login.html (same overwrite pattern as the favicon/logo). Extends the stock | ||
| page.html so favicon (already the Unsloth icon) and form plumbing stay intact; | ||
| we override the title, hide the stock header, and render a dark centered card | ||
| matching the "Unsloth Dark" (Monokai) theme. The card logo reads | ||
| static/logo/logo.png, which the image build replaces with the Unsloth logo. #} | ||
| {% extends "page.html" %} | ||
|
|
||
| {% block title %}Unsloth{% endblock %} | ||
|
|
||
| {% block stylesheet %} | ||
| <style> | ||
| html, body { | ||
| background: hsl(70, 8%, 12%) !important; | ||
| color: hsl(60, 30%, 96%); | ||
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | ||
| } | ||
| /* Hide the stock top header (jupyter_server's index.css uses a higher- | ||
| specificity selector, so force it); the centered card carries the brand. */ | ||
| #header, .header-bar { display: none !important; } | ||
| #site { display: flex; justify-content: center; align-items: flex-start; } | ||
| .unsloth-login-card { | ||
| margin-top: 11vh; | ||
| background: hsl(70, 8%, 18%); | ||
| border: 1px solid hsl(70, 8%, 28%); | ||
| border-radius: 12px; | ||
| padding: 38px 40px 32px; | ||
| width: 360px; | ||
| max-width: 90vw; | ||
| text-align: center; | ||
| box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45); | ||
| } | ||
| .unsloth-login-card img.logo { height: 72px; width: auto; margin-bottom: 14px; } | ||
| /* A random Unsloth Studio sloth sticker, shown like the Studio login screen. */ | ||
| .unsloth-login-card img.sloth { | ||
| height: 104px; width: 104px; object-fit: contain; | ||
| margin: 2px auto 10px; display: block; | ||
| } | ||
| .unsloth-login-card h1 { font-size: 22px; margin: 0 0 4px; font-weight: 700; } | ||
| .unsloth-login-card p.sub { color: hsl(60, 8%, 64%); margin: 0 0 24px; font-size: 14px; } | ||
| .unsloth-login-card label { | ||
| display: block; text-align: left; font-size: 13px; | ||
| margin-bottom: 6px; color: hsl(60, 8%, 76%); | ||
| } | ||
| .unsloth-login-card input[type="password"] { | ||
| width: 100%; box-sizing: border-box; padding: 10px 12px; | ||
| border-radius: 8px; border: 1px solid hsl(70, 8%, 32%); | ||
| background: hsl(70, 8%, 13%); color: inherit; font-size: 14px; margin-bottom: 18px; | ||
| } | ||
| .unsloth-login-card input[type="password"]:focus { | ||
| outline: none; border-color: hsl(160, 55%, 48%); | ||
| } | ||
| .unsloth-login-card button { | ||
| width: 100%; padding: 10px 12px; border-radius: 8px; border: none; | ||
| background: hsl(160, 55%, 42%); color: #fff; font-weight: 600; font-size: 14px; cursor: pointer; | ||
| } | ||
| .unsloth-login-card button:hover { background: hsl(160, 55%, 36%); } | ||
| .unsloth-login-card .message { margin-top: 16px; font-size: 13px; } | ||
| .unsloth-login-card .message.error { color: hsl(0, 75%, 68%); } | ||
| </style> | ||
| {% endblock %} | ||
|
|
||
| {% block site %} | ||
| {# A different Unsloth Studio sloth sticker each visit (matches Studio's login). | ||
| The PNGs are copied into static/sloth/NN.png by the image build; if one is | ||
| missing the onerror handler falls back to the Unsloth logo so the page never | ||
| shows a broken image. #} | ||
| {% set sloths = [ | ||
| "01.png", "02.png", "03.png", "04.png", "05.png", "06.png", "07.png", | ||
| "08.png", "09.png", "10.png", "11.png", "12.png", "13.png", "14.png", | ||
| "15.png", "16.png", "17.png", "18.png", "19.png", "20.png" | ||
| ] %} | ||
| <div class="unsloth-login-card"> | ||
| <img class="sloth" src='{{ static_url("sloth/" ~ (sloths | random)) }}' | ||
| onerror="this.onerror=null;this.className='logo';this.src='{{ static_url('logo/logo.png') }}';" | ||
| alt='Unsloth' /> | ||
| <h1>Unsloth</h1> | ||
| <p class="sub">Sign in to JupyterLab</p> | ||
| {% if login_available %} | ||
| <form action="{{base_url}}login?next={{next}}" method="post"> | ||
| {{ xsrf_form_html() | safe }} | ||
| <label for="password_input"> | ||
| {% if token_available %}{% trans %}Password or token{% endtrans %}{% else %}{% trans %}Password{% endtrans %}{% endif %} | ||
| </label> | ||
| <input type="password" name="password" id="password_input" autofocus> | ||
| <button type="submit" id="login_submit">{% trans %}Log in{% endtrans %}</button> | ||
| </form> | ||
| {% endif %} | ||
| {% if message %} | ||
| {% for key in message %} | ||
| <div class="message {{key}}">{{ message[key] }}</div> | ||
| {% endfor %} | ||
| {% endif %} | ||
| </div> | ||
| {% endblock %} | ||
|
|
||
| {% block script %}{% endblock %} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When building
Dockerfile.studiowithdocker/as the context, this allowlist still excludesjupyter/install_sloth_stickers.pybecause the file is not whitelisted after the top-level**ignore. The newCOPY jupyter/install_sloth_stickers.py ...in the studio Dockerfile therefore fails with a missing source before the image can build; add an exception for that helper alongside the otherjupyter/assets.Useful? React with 👍 / 👎.