APP-1 demo improvements

.gitattributes

@@ -33,4 +33,3 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
-*.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -209,5 +209,3 @@ __marimo__/
 # Other custom ignores
 best_model
 model-cache
-*.onnx
-*.pt

README.md

@@ -1,8 +1,8 @@
 ---
 title: AlpineLLM Live Demo
 emoji: 🏔️
-colorFrom: indigo
-colorTo: blue
+colorFrom: blue
+colorTo: purple
 sdk: gradio
 sdk_version: 5.42.0
 app_file: app.py
@@ -20,40 +20,23 @@ A domain-specific language model for alpine storytelling.
 
 Try asking about mountain adventures! 🏔️
 
-## About AlpineLLM
+### About AlpineLLM Tiny
 
-AlpineLLM-Tiny-10M-Base is a lightweight base language model with ~10.8 million trainable parameters. It was pre-trained from scratch on raw text corpora drawn primarily from public-domain literature on alpinism, including expedition narratives and climbing essays.
+AlpineLLM Tiny is a lightweight base language model with ~10.8 million trainable parameters. It was pre-trained from scratch on raw text corpora drawn primarily from public-domain literature on alpinism, including expedition narratives and climbing essays.
 
 This demo showcases the model’s text generation capabilities within its specialized domain. Please note that AlpineLLM is a base model, and it has not been fine-tuned for downstream tasks such as summarization or dialogue. Its outputs reflect patterns learned directly from the training texts.
 
-This space shows a free CPU-only demo of the model, so inference may take a few seconds. Text generation of the tiny model may lack full coherence due to its limited size and character-level tokenization. For improved results, consider using the source repository to load larger pretrained weights and run inference on a GPU.
+This space shows a free CPU-only demo of the model, so inference may take a few seconds. Text generation of the tiny model may lack full coherence. For improved results, consider checking the source repository to load larger pretrained weights and run inference on a GPU.
 
 Complete source code and full model documentation is available in the related repositories.
 
 ### Related Repositories
 
-- [**🤗 AlpineLLM Model Page @ HuggingFace**](https://huggingface.co/Borzyszkowski/AlpineLLM-Tiny-10M-Base)
+- [**🤗 AlpineLLM Model Weights @ HuggingFace**](https://huggingface.co/Borzyszkowski/AlpineLLM-Model)
 - [**⛏️ AlpineLLM Source Code @ GitHub**](https://github.com/Borzyszkowski/AlpineLLM)
 
-### How to install?
-
-The software has been tested on Ubuntu 20.04 with CUDA 12.2 and Python3.10.
-
-Please use a Python virtual environment to install the dependencies:
-    
-    python3.10 -m venv venv_AlpineLLM
-    source venv_AlpineLLM/bin/activate
-    pip install -r requirements.txt
-
-### How to start?
-
-The application starts automatically upon pushing changes to the Hugging Face Space.
-For local development, please run:
-
-```
-python app.py
-```
 
 ### Contact and technical support
 - <b>Bartek Borzyszkowski</b> <br>
     Web: <a href="https://borzyszkowski.github.io/">borzyszkowski.github.io</a>
+

app.py

@@ -1,6 +1,5 @@
 """ A simple Gradio web app to interact with the AlpineLLM model """
 
-import base64
 import gradio as gr
 import os
 import shutil
@@ -8,9 +7,8 @@ import torch
 
 from huggingface_hub import hf_hub_download
 
-from config_util import Config
 from demo_inference import AlpineLLMInference
-from style import custom_css
+from config_util import Config
 
 HF_TOKEN = os.environ.get("HF_TOKEN", None)
 
@@ -26,70 +24,29 @@ def download_model(cfg):
     return model_path
 
 
-def image_to_base64_data_url(filepath: str) -> str:
-    """ Convert an image file to a Base64 data URL for embedding in HTML """
-    try:
-        ext = os.path.splitext(filepath)[1].lower()
-        mime_types = {".jpg": "image/jpeg", ".jpeg": "image/jpeg", ".png": "image/png", ".gif": "image/gif", ".webp": "image/webp", ".bmp": "image/bmp"}
-        mime_type = mime_types.get(ext, "image/jpeg")
-        with open(filepath, "rb") as image_file:
-            encoded_string = base64.b64encode(image_file.read()).decode("utf-8")
-        return f"data:{mime_type};base64,{encoded_string}"
-    except Exception as e:
-        print(f"Error encoding image to Base64: {e}")
-        return ""
-
-
 def start_app():
     """ Start the web app via Gradio with custom layout """
-    GOOGLE_FONTS_URL = "<link href='https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap' rel='stylesheet'>"
-    LOGO_IMAGE_PATH = "assets/background_round.png"
-    logo_data_url = image_to_base64_data_url(LOGO_IMAGE_PATH) if os.path.exists(LOGO_IMAGE_PATH) else ""
-    with gr.Blocks(head=GOOGLE_FONTS_URL, css=custom_css, theme=gr.themes.Soft()) as app:
-        gr.HTML("""
-        <div class="app-header">
-            <h1>AlpineLLM Live Demo</h1>
-            <p>
-                A domain-specific language model for alpine storytelling. <br>
-                Try asking about mountain adventures! 🏔️ <br>
-                <strong>Author:</strong> <a href="https://borzyszkowski.github.io/">Bartek Borzyszkowski</a>
-            </p>
-        </div>
-        """)
-        
-        gr.HTML(f"""
-            <div class="app-header">
-                <img src="{logo_data_url}" alt="AlpineLLM" style="max-height:10%; width: auto; margin: 10px auto; display: block;">
-            </div>
-            <div class="quick-links">
-                <a href="https://github.com/Borzyszkowski/AlpineLLM" target="_blank">GitHub</a> | <a href="https://huggingface.co/Borzyszkowski/AlpineLLM-Tiny-10M-Base" target="_blank">Model Page</a>
-            </div>
-            <div class="notice">
-                <strong>Heads up:</strong> This space shows a free CPU-only demo of the model, so inference may take a few seconds. Text generation of the tiny model may lack full coherence due to its limited size and character-level tokenization. Consider using the source repository to load larger pretrained weights and run inference on a GPU. 
-            </div>
-            <br>
-            """)
-
-        gr.Markdown("<h3> About AlpineLLM</h3>")
+    with gr.Blocks(css="""#builtwithgradio, .footer, .svelte-1ipelgc {display: none !important;}""") as app:
+        gr.Markdown("<h1 style='text-align: center;'> AlpineLLM App</h1>")
         gr.Markdown(
-            "<p>"
-            "AlpineLLM-Tiny-10M-Base is a lightweight base language model with ~10.8 million trainable parameters. It was pre-trained from scratch on raw text corpora drawn primarily from public-domain literature on alpinism, including expedition narratives and climbing essays. <br><br>"
-            "This demo showcases the model's text generation capabilities within its specialized domain. Please note that AlpineLLM is a base model, and it has not been fine-tuned for downstream tasks such as summarization or dialogue. Its outputs reflect patterns learned directly from the training texts. <br><br>"
+            "<p style='text-align: center;'>"
+            "A domain-specific language model for alpine storytelling. <br>"
+            "Generate climbing stories, mountain impressions, and expedition-style text."
             "</p>"
         )
+
         with gr.Row():
-            with gr.Column(scale=2):
+            with gr.Column(scale=1):
                 prompt = gr.Textbox(
                     lines=8,
                     label="Your alpine prompt...",
                     placeholder="A dawn climb on the Matterhorn..."
                 )
                 max_tokens = gr.Slider(50, 1000, value=300, step=10, label="Max output tokens")
-                generate_btn = gr.Button("⛏️ Generate")
+                generate_btn = gr.Button("🚀 Generate")
 
             with gr.Column(scale=2):
-                output = gr.Textbox(lines=15, label="Generated Alpine Story", interactive=False)
-        gr.Markdown("<br>")
+                output = gr.Textbox(lines=20, label="Generated Alpine Story", interactive=False)
 
         # Bind button click to inference
         generate_btn.click(
@@ -108,8 +65,8 @@ if __name__ == '__main__':
     cfg = {
         'cuda_id': 0,
         'model_type': 'transformer',
-        'repo_id': "Borzyszkowski/AlpineLLM-Tiny-10M-Base",
-        'model_name': "best_model.pt",
+        'repo_id': "Borzyszkowski/AlpineLLM-model",
+        'model_name': "best_model",
         'cache_dir': "./model-cache",
     }
     cfg = Config(cfg)

style.py

@@ -1,68 +0,0 @@
-# =========================
-# CSS & UI
-# =========================
-custom_css = """
-body, .gradio-container { font-family: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", sans-serif; }
-.app-header { text-align: center; max-width: 800px; margin: 0 auto 8px !important; }
-.gradio-container { padding: 4px 0 !important; max-width: 1200px !important; margin: 0 auto !important; }
-.gradio-container [data-testid="tabs"], .gradio-container .tabs { margin-top: 0 !important; }
-.gradio-container [data-testid="tabitem"], .gradio-container .tabitem { padding-top: 4px !important; }
-.gradio-container .wrap { gap: 0 !important; }
-.quick-links { text-align: center; padding: 8px 0; border: 1px solid #e5e7eb; border-radius: 8px; margin: 8px auto; max-width: 800px; }
-.quick-links a { margin: 0 12px; font-size: 14px; font-weight: 600; color: #3b82f6; text-decoration: none; }
-.quick-links a:hover { text-decoration: underline; }
-.prompt-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
-.prompt-grid button { height: 40px !important; padding: 0 12px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: 13px !important; letter-spacing: 0.2px; }
-#image_preview_vl, #image_preview_doc { height: 400px !important; overflow: auto; }
-#image_preview_vl img, #image_preview_doc img, #vis_image_doc img { width: 100% !important; height: auto !important; object-fit: contain !important; display: block; }
-#md_preview_vl, #md_preview_doc { max-height: 540px; min-height: 180px; overflow: auto; scrollbar-gutter: stable both-edges; }
-#md_preview_vl .prose, #md_preview_doc .prose { line-height: 1.7 !important; }
-#md_preview_vl .prose img, #md_preview_doc .prose img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
-.notice { margin: 8px auto 0; max-width: 800px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; font-size: 14px; line-height: 1.6; }
-.notice strong { font-weight: 700; }
-.notice a { color: #3b82f6; text-decoration: none; }
-.notice a:hover { text-decoration: underline; }
-
-/* Dark mode styles */
-@media (prefers-color-scheme: dark) {
-  body, .gradio-container {
-    background-color: #0f1117 !important;
-    color: #f5f5f5 !important;
-  }
-
-  .notice {
-    background: #1e293b !important;
-    color: #f5f5f5 !important;
-    border: 1px solid #334155 !important;
-  }
-
-  .notice a {
-    color: #60a5fa !important;
-  }
-
-  .quick-links {
-    border-color: #334155 !important;
-  }
-
-  .quick-links a {
-    color: #93c5fd !important;
-  }
-}
-
-/* Hide empty Gradio auto-scroll/anchor button or padding container near Markdown blocks */
-button.svelte-vuh1yp, 
-div.svelte-vuh1yp:has(button),
-div#component-3 > div.wrap.center.full,
-div[id^="component-"][class*="hide-container"] .wrap.center.full {
-    display: none !important;
-}
-
-/* Prevent extra padding on Markdown containers */
-div[class*="block"].hide-container {
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-    overflow: visible !important;
-}
-
-"""