Update app.py

app.py

@@ -7,12 +7,10 @@ from transformers import (
     TextIteratorStreamer,
 )
 
-# Configuration
 MODEL_NAMES = ["LeCarnet-3M", "LeCarnet-8M", "LeCarnet-21M"]
 HF_TOKEN = os.environ.get("HUGGINGFACEHUB_API_TOKEN") or os.getenv("HUGGINGFACEHUB_API_TOKEN")
-MEDIA_PATH = "media/le-carnet.png"  # Relative path to logo
+MEDIA_PATH = "media/le-carnet.png"
 
-# Pre-load all tokenizers and models
 models = {}
 tokenizers = {}
 for name in MODEL_NAMES:
@@ -30,10 +28,6 @@ def respond(
     temperature: float,
     top_p: float,
 ):
-    """
-    Generate a streaming response from the chosen LeCarnet model,
-    prepending the logo and model name in the chat bubble.
-    """
     tokenizer = tokenizers[selected_model]
     model = models[selected_model]
     inputs = tokenizer(prompt, return_tensors="pt")
@@ -54,16 +48,14 @@ def respond(
         eos_token_id=tokenizer.eos_token_id,
     )
 
-    # Start generation in background thread
     thread = threading.Thread(target=model.generate, kwargs=generate_kwargs)
     thread.start()
 
-    prefix = f"<img src='{MEDIA_PATH}' alt='logo' width='20' style='vertical-align: middle;'/> <strong>{selected_model}</strong>: "
+    prefix = f"<img src='{MEDIA_PATH}' width='24' style='display:inline; vertical-align:middle; margin-right:6px;'/> <strong>{selected_model}</strong>: "
     accumulated = ""
     first = True
     for new_text in streamer:
         if first:
-            # include prefix only once at start
             accumulated = prefix + new_text
             first = False
         else:
@@ -71,19 +63,16 @@ def respond(
         yield accumulated
 
 
-# Build Gradio ChatInterface
-with gr.Blocks() as demo:
-    gr.Markdown("# LeCarnet: Short French Stories")
+with gr.Blocks(css=".gr-chatbox {height: 600px !important;}") as demo:
+    gr.Markdown("## LeCarnet: Short French Stories")
+
     with gr.Row():
-        with gr.Column():
+        with gr.Column(scale=4):
+            with gr.Row():
+                toggle_btn = gr.Button("Show/hide parameters", elem_id="toggle-btn")
             chat = gr.ChatInterface(
                 fn=respond,
-                additional_inputs=[
-                    gr.Dropdown(MODEL_NAMES, value="LeCarnet-8M", label="Model"),
-                    gr.Slider(1, 512, value=512, step=1, label="Max new tokens"),
-                    gr.Slider(0.1, 2.0, value=0.7, step=0.1, label="Temperature"),
-                    gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top‑p"),
-                ],
+                additional_inputs=[],
                 title="LeCarnet Chat",
                 description="Type the beginning of a sentence and watch the model finish it.",
                 examples=[
@@ -93,7 +82,25 @@ with gr.Blocks() as demo:
                 ],
                 cache_examples=False,
             )
-    
+
+        with gr.Column(scale=1, visible=True, elem_id="settings-panel") as param_panel:
+            selected_model = gr.Dropdown(MODEL_NAMES, value="LeCarnet-8M", label="Model")
+            max_tokens = gr.Slider(1, 512, value=512, step=1, label="Max new tokens")
+            temperature = gr.Slider(0.1, 2.0, value=0.7, step=0.1, label="Temperature")
+            top_p = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top‑p")
+
+            chat.additional_inputs = [selected_model, max_tokens, temperature, top_p]
+
+    demo.load(None, None, _js="""
+        () => {
+            const toggleBtn = document.querySelector('#toggle-btn button') || document.querySelector('#toggle-btn');
+            const panel = document.querySelector('#settings-panel');
+            toggleBtn.addEventListener('click', () => {
+                panel.style.display = (panel.style.display === 'none') ? 'flex' : 'none';
+            });
+        }
+    """)
+
 if __name__ == "__main__":
     demo.queue()
-    demo.launch()
+    demo.launch()