Update app.py

app.py

@@ -1,97 +1,124 @@
 import spaces
 import json
 import subprocess
+import os
 from llama_cpp import Llama
 from llama_cpp_agent import LlamaCppAgent, MessagesFormatterType
 from llama_cpp_agent.providers import LlamaCppPythonProvider
 from llama_cpp_agent.chat_history import BasicChatHistory
 from llama_cpp_agent.chat_history.messages import Roles
 import gradio as gr
-from huggingface_hub import hf_hub_download
+# Wichtige Imports für das dynamische Herunterladen
+from huggingface_hub import hf_hub_download, list_repo_files
 
+# --- Globale Variablen ---
 llm = None
 llm_model = None
+MODEL_CONFIG_FILE = "models.json"
+DEFAULT_LOCAL_DIR = "./models"
+MODEL_DROPDOWN_CHOICES = []
+MODEL_FILE_MAPPING = {} # Map des Anzeigenamens auf den tatsächlichen Dateipfad (oder den ersten Teil des Ordners)
+
+# Stelle sicher, dass das models-Verzeichnis existiert
+os.makedirs(DEFAULT_LOCAL_DIR, exist_ok=True)
+
+
+# --- Hilfsfunktion zum Herunterladen von Dateien/Ordnern ---
+def download_models():
+    """Liest models.json und lädt alle Modelle herunter."""
+    global MODEL_DROPDOWN_CHOICES
+    global MODEL_FILE_MAPPING
+
+    try:
+        with open(MODEL_CONFIG_FILE, 'r') as f:
+            config = json.load(f)
+    except FileNotFoundError:
+        print(f"ERROR: {MODEL_CONFIG_FILE} nicht gefunden.")
+        return
+    except json.JSONDecodeError:
+        print(f"ERROR: {MODEL_CONFIG_FILE} ist kein gültiges JSON.")
+        return
+
+    # Die globale lokale Zielverzeichnis aus der JSON-Datei abrufen (standardmäßig './models')
+    local_dir = config.get('local_dir', DEFAULT_LOCAL_DIR)
+    if not os.path.exists(local_dir):
+        os.makedirs(local_dir, exist_ok=True)
+        print(f"Lokales Verzeichnis {local_dir} erstellt.")
+
+    models_list = [model for key, model in config.items() if key != 'local_dir']
+    
+    print(f"Starte den Download von {len(models_list)} Modellen...")
+
+    for model_entry in models_list:
+        name = model_entry.get('name')
+        repo_id = model_entry.get('repo_id')
+        file_name = model_entry.get('file_name')
+        folder_name = model_entry.get('folder_name')
+
+        if not name or not repo_id:
+            print(f"WARNUNG: Eintrag übersprungen, da 'name' oder 'repo_id' fehlt: {model_entry}")
+            continue
+
+        MODEL_DROPDOWN_CHOICES.append(name)
+
+        # Fall 1: Einzelne Datei angegeben
+        if file_name:
+            print(f"Lade einzelne Datei für '{name}': {file_name}")
+            hf_hub_download(
+                repo_id=repo_id,
+                filename=file_name,
+                local_dir=local_dir
+            )
+            # Speichere den tatsächlichen Dateinamen, den Llama-Cpp braucht
+            MODEL_FILE_MAPPING[name] = os.path.join(os.path.basename(local_dir), file_name)
 
-# --- Modell-Downloads ---
-hf_hub_download(
-    repo_id="unsloth/Llama-3.2-1B-Instruct-GGUF",
-    filename = "Llama-3.2-1B-Instruct-UD-Q2_K_XL.gguf",
-    local_dir = "./models"
-)
-hf_hub_download(
-    repo_id="unsloth/granite-4.0-h-tiny-GGUF",
-    filename="granite-4.0-h-tiny-UD-Q3_K_XL.gguf",
-    local_dir = "./models"
-)
-hf_hub_download(
-    repo_id="unsloth/granite-4.0-h-small-GGUF",
-    filename="granite-4.0-h-small-UD-Q2_K_XL.gguf",
-    local_dir = "./models"
-)
-hf_hub_download(
-    repo_id="unsloth/GLM-4.5-Air-GGUF",
-    filename="UD-Q3_K_XL/GLM-4.5-Air-UD-Q3_K_XL-00001-of-00002.gguf",
-    local_dir = "./models"
-)
-hf_hub_download(
-    repo_id="unsloth/GLM-4.5-Air-GGUF",
-    filename="UD-Q3_K_XL/GLM-4.5-Air-UD-Q3_K_XL-00002-of-00002.gguf",
-    local_dir = "./models"
-)
 
-# --- CSS Styling ---
-css = """
-.bubble-wrap {
-    padding-top: calc(var(--spacing-xl) * 3) !important;
-}
-.message-row {
-    justify-content: space-evenly !important;
-    width: 100% !important;
-    max-width: 100% !important;
-    margin: calc(var(--spacing-xl)) 0 !important;
-    padding: 0 calc(var(--spacing-xl) * 3) !important;
-}
-.flex-wrap.user {
-    border-bottom-right-radius: var(--radius-lg) !important;
-}
-.flex-wrap.bot {
-    border-bottom-left-radius: var(--radius-lg) !important;
-}
-.message.user{
-    padding: 10px;
-}
-.message.bot{
-    text-align: right;
-    width: 100%;
-    padding: 10px;
-    border-radius: 10px;
-}
-.message-bubble-border {
-    border-radius: 6px !important;
-}
-.message-buttons {
-    justify-content: flex-end !important;
-}
-.message-buttons-left {
-    align-self: end !important;
-}
-.message-buttons-bot, .message-buttons-user {
-    right: 10px !important;
-    left: auto !important;
-    bottom: 2px !important;
-}
-.dark.message-bubble-border {
-    border-color: #343140 !important;
-}
-.dark.user {
-    background: #1e1c26 !important;
-}
-.dark.assistant.dark, .dark.pending.dark {
-    background: #16141c !important;
-}
-"""
+        # Fall 2: Ordner angegeben (möglicherweise mehrere Teile)
+        elif folder_name:
+            print(f"Lade Ordner für '{name}': {folder_name}")
+            
+            # Alle Dateien im Repo auflisten
+            all_files = list_repo_files(repo_id=repo_id)
+            
+            # Nur Dateien im gewünschten Ordner filtern
+            files_in_folder = sorted([
+                filename
+                for filename in all_files
+                if filename.startswith(f"{folder_name}/")
+            ])
+            
+            if not files_in_folder:
+                print(f"WARNUNG: Im Ordner '{folder_name}' des Repos '{repo_id}' wurden keine Dateien gefunden.")
+                continue
 
-# --- Hilfsfunktion für den Message Formatter Typ ---
+            # Jede Datei einzeln herunterladen
+            for filename in files_in_folder:
+                print(f"  -> Lade Datei herunter: {filename}")
+                hf_hub_download(
+                    repo_id=repo_id,
+                    filename=filename,
+                    local_dir=local_dir
+                )
+            
+            # Für die Llama-CPP-Initialisierung nur den Pfad zum ersten Teil speichern
+            first_part_filename = files_in_folder[0]
+            # Der Pfad, den Llama-cpp erwartet, muss relativ zum Installationsort sein,
+            # daher verwenden wir: <local_dir>/<first_part_filename>
+            MODEL_FILE_MAPPING[name] = os.path.join(os.path.basename(local_dir), first_part_filename)
+        
+        else:
+             print(f"WARNUNG: Für '{name}' wurde weder 'file_name' noch 'folder_name' angegeben. Übersprungen.")
+
+    print("Alle konfigurierten Modelle wurden heruntergeladen.")
+
+# --- Hier die neue Download-Funktion aufrufen ---
+download_models()
+# ------------------------------------------------
+
+# --- CSS Styling (Unverändert gelassen) ---
+css = """.bubble-wrap {    padding-top: calc(var(--spacing-xl) * 3) !important;}.message-row {    justify-content: space-evenly !important;    width: 100% !important;    max-width: 100% !important;    margin: calc(var(--spacing-xl)) 0 !important;    padding: 0 calc(var(--spacing-xl) * 3) !important;}.flex-wrap.user {    border-bottom-right-radius: var(--radius-lg) !important;}.flex-wrap.bot {    border-bottom-left-radius: var(--radius-lg) !important;}.message.user{    padding: 10px;}.message.bot{    text-align: right;    width: 100%;    padding: 10px;    border-radius: 10px;}.message-bubble-border {    border-radius: 6px !important;}.message-buttons {    justify-content: flex-end !important;}.message-buttons-left {    align-self: end !important;}.message-buttons-bot, .message-buttons-user {    right: 10px !important;    left: auto !important;    bottom: 2px !important;}.dark.message-bubble-border {    border-color: #343140 !important;}.dark.user {    background: #1e1c26 !important;}.dark.assistant.dark, .dark.pending.dark {    background: #16141c !important;}"""
+
+# --- Hilfsfunktion für den Message Formatter Typ (Unverändert gelassen) ---
 def get_messages_formatter_type(model_name):
     print(f"getting type for model: {model_name}")
     if "Llama" in model_name:
@@ -99,7 +126,8 @@ def get_messages_formatter_type(model_name):
     elif "Mistral" in model_name:
         return MessagesFormatterType.MISTRAL
     elif "unsloth" in model_name:
-        return MessagesFormatterType.CHATML
+        # Hier muss man den Anzeigenamen verwenden, da 'model_name' im JSON-Eintrag steht
+        return MessagesFormatterType.CHATML 
     else:
         print("formatter type not found, trying default")
         return MessagesFormatterType.CHATML
@@ -109,7 +137,7 @@ def get_messages_formatter_type(model_name):
 def respond(
     message,
     history: list[dict[str, str]], # Erwartet jetzt Dictionaries ('messages' type)
-    model,
+    selected_model_name, # Wird aus Dropdown übergeben (der 'name' aus JSON)
     system_message,
     max_tokens,
     temperature,
@@ -119,29 +147,39 @@ def respond(
 ):
     global llm
     global llm_model
+    global MODEL_FILE_MAPPING
     
-    chat_template = get_messages_formatter_type(model)
-    
-    if llm is None or llm_model != model:
+    # 1. Den tatsächlichen Dateipfad abrufen
+    model_file_path = MODEL_FILE_MAPPING.get(selected_model_name)
+    if not model_file_path:
+        return f"Fehler: Model-Datei für '{selected_model_name}' nicht gefunden. Bitte prüfen Sie die models.json und das Download-Verzeichnis."
+
+    # 2. Den Formatierer-Typ basierend auf dem Anzeigenamen bestimmen
+    chat_template = get_messages_formatter_type(selected_model_name)
+
+    # 3. Das Llama-Objekt nur initialisieren, wenn es neu oder ein anderes Modell ist
+    # HINWEIS: 'model_file_path' ist jetzt der korrekte Dateipfad
+    if llm is None or llm_model != model_file_path:
+        print(f"Lade neues Modell: {model_file_path}")
         llm = Llama(
-            model_path=f"models/{model}",
+            # Wir übergeben den relativen Pfad (z.B. models/UD-Q3_K_XL/...)
+            model_path=model_file_path, 
             flash_attn=True,
             n_gpu_layers=81,
             n_batch=1024,
             n_ctx=8192,
         )
-        llm_model = model
+        llm_model = model_file_path
     
+    # 4. Agent und Sampling-Einstellungen (Unverändert, aber verwendet das neue 'llm'-Objekt)
     provider = LlamaCppPythonProvider(llm)
-
     agent = LlamaCppAgent(
         provider,
         system_prompt=f"{system_message}",
         predefined_messages_formatter_type=chat_template,
         debug_output=True
     )
-    
-    # Sampling-Einstellungen setzen
+
     settings = provider.get_provider_default_settings()
     settings.temperature = temperature
     settings.top_k = top_k
@@ -150,23 +188,21 @@ def respond(
     settings.repeat_penalty = repeat_penalty
     settings.stream = True
 
-    # Chat-Verlauf vorbereiten
     messages = BasicChatHistory()
-
     for msn in history:
         if msn.get('role') == 'user':
             role = Roles.user
         elif msn.get('role') == 'assistant':
             role = Roles.assistant
         else:
-             continue
-             
+             continue                     
         message_dict = {
             'role': role,
             'content': msn.get('content', '')
         }
         messages.add_message(message_dict)
-    
+
+    # 5. Stream-Antwort generieren
     stream = agent.get_chat_response(
         message,
         llm_sampling_settings=settings,
@@ -174,45 +210,20 @@ def respond(
         returns_streaming_generator=True,
         print_output=False
     )
-    
+        
     outputs = ""
     for output in stream:
         outputs += output
         yield outputs
 
 # --- HTML Platzhalter für den Chatbot (als String beibehalten) ---
-PLACEHOLDER = """
-<div class="message-bubble-border" style="display:flex; max-width: 600px; border-radius: 6px; border-width: 1px; border-color: #e5e7eb; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px);">
-    <div style="padding: .5rem 1.5rem;display: flex;flex-direction: column;justify-content: space-evenly;">
-        <h2 style="text-align: left; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">llama-cpp-agent</h2>
-        <p style="text-align: left; font-size: 16px; line-height: 1.5; margin-bottom: 15px;">The llama-cpp-agent framework based on llama_cpp_python simplifies interactions with Large Language Models (LLMs). Here you can try out a range of models via the basic chat interface. For advanced features check out the discord or github link below.</p>
-        <div style="display: flex; justify-content: space-between; align-items: center;">
-            <div style="display: flex; justify-content: flex-end; align-items: center;">
-                <a href="https://discord.gg/fgr5RycPFP" target="_blank" rel="noreferrer" style="padding: .5rem;">
-                    <svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 5 30.67 23.25">
-                        <title>Discord</title>
-                        <path d="M26.0015 6.9529C24.0021 6.03845 21.8787 5.37198 19.6623 5C19.3833 5.48048 19.0733 6.13144 18.8563 6.64292C16.4989 6.30193 14.1585 6.30193 11.8336 6.64292C11.6166 6.13144 11.2911 5.48048 11.0276 5C8.79575 5.37198 6.67235 6.03845 4.6869 6.9529C0.672601 12.8736 -0.41235 18.6548 0.130124 24.3585C2.79599 26.2959 5.36889 27.4739 7.89682 28.2489C8.51679 27.4119 9.07477 26.5129 9.55525 25.5675C8.64079 25.2265 7.77283 24.808 6.93587 24.312C7.15286 24.1571 7.36986 23.9866 7.57135 23.8161C12.6241 26.1255 18.0969 26.1255 23.0876 23.8161C23.3046 23.9866 23.5061 24.1571 23.7231 24.312C22.8861 24.808 22.0182 25.2265 21.1037 25.5675C21.5842 26.5129 22.1422 27.4119 22.7621 28.2489C25.2885 27.4739 27.8769 26.2959 30.5288 24.3585C31.1952 17.7559 29.4733 12.0212 26.0015 6.9529ZM10.2527 20.8402C8.73376 20.8402 7.49382 19.4608 7.49382 17.7714C7.49382 16.082 8.70276 14.7025 10.2527 14.7025C11.7871 14.7025 13.0425 16.082 13.0115 17.7714C13.0115 19.4608 11.7871 20.8402 10.2527 20.8402ZM20.4373 20.8402C18.9183 20.8402 17.6768 19.4608 17.6768 17.7714C17.6768 16.082 18.8873 14.7025 20.4373 14.7025C21.9717 14.7025 23.2271 16.082 23.1961 17.7714C23.1961 19.4608 21.9872 20.8402 20.4373 20.8402Z"></path>
-                    </svg>
-                </a>
-                <a href="https://github.com/Maximilian-Winter/llama-cpp-agent" target="_blank" rel="noreferrer" style="padding: .5rem;">
-                    <svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18">
-                        <title>GitHub</title>
-                        <path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>
-                    </svg>
-                </a>
-            </div>
-        </div>
-    </div>
-</div>
-"""
+PLACEHOLDER = """<div class="message-bubble-border" style="display:flex; max-width: 600px; border-radius: 6px; border-width: 1px; border-color: #e5e7eb; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px);">    <div style="padding: .5rem 1.5rem;display: flex;flex-direction: column;justify-content: space-evenly;">        <h2 style="text-align: left; font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">llama-cpp-agent</h2>        <p style="text-align: left; font-size: 16px; line-height: 1.5; margin-bottom: 15px;">The llama-cpp-agent framework based on llama_cpp_python simplifies interactions with Large Language Models (LLMs). Here you can try out a range of models via the basic chat interface. For advanced features check out the discord or github link below.</p>        <div style="display: flex; justify-content: space-between; align-items: center;">            <div style="display: flex; justify-content: flex-end; align-items: center;">                <a href="https://discord.gg/fgr5RycPFP" target="_blank" rel="noreferrer" style="padding: .5rem;">                    <svg width="24" height="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 5 30.67 23.25">                        <title>Discord</title>                        <path d="M26.0015 6.9529C24.0021 6.03845 21.8787 5.37198 19.6623 5C19.3833 5.48048 19.0733 6.13144 18.8563 6.64292C16.4989 6.30193 14.1585 6.30193 11.8336 6.64292C11.6166 6.13144 11.2911 5.48048 11.0276 5C8.79575 5.37198 6.67235 6.03845 4.6869 6.9529C0.672601 12.8736 -0.41235 18.6548 0.130124 24.3585C2.79599 26.2959 5.36889 27.4739 7.89682 28.2489C8.51679 27.4119 9.07477 26.5129 9.55525 25.5675C8.64079 25.2265 7.77283 24.808 6.93587 24.312C7.15286 24.1571 7.36986 23.9866 7.57135 23.8161C12.6241 26.1255 18.0969 26.1255 23.0876 23.8161C23.3046 23.9866 23.5061 24.1571 23.7231 24.312C22.8861 24.808 22.0182 25.2265 21.1037 25.5675C21.5842 26.5129 22.1422 27.4119 22.7621 28.2489C25.2885 27.4739 27.8769 26.2959 30.5288 24.3585C31.1952 17.7559 29.4733 12.0212 26.0015 6.9529ZM10.2527 20.8402C8.73376 20.8402 7.49382 19.4608 7.49382 17.7714C7.49382 16.082 8.70276 14.7025 10.2527 14.7025C11.7871 14.7025 13.0425 16.082 13.0115 17.7714C13.0115 19.4608 11.7871 20.8402 10.2527 20.8402ZM20.4373 20.8402C18.9183 20.8402 17.6768 19.4608 17.6768 17.7714C17.6768 16.082 18.8873 14.7025 20.4373 14.7025C21.9717 14.7025 23.2271 16.082 23.1961 17.7714C23.1961 19.4608 21.9872 20.8402 20.4373 20.8402Z"></path>                    </svg>                </a>                <a href="https://github.com/Maximilian-Winter/llama-cpp-agent" target="_blank" rel="noreferrer" style="padding: .5rem;">                    <svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18">                        <title>GitHub</title>                        <path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path>                    </svg>                </a>            </div>        </div>    </div></div>"""
 
-model_dropdown = gr.Dropdown([
-    'granite-4.0-h-tiny-UD-Q3_K_XL.gguf',
-    'Llama-3.2-1B-Instruct-UD-Q2_K_XL.gguf',
-    'granite-4.0-h-small-UD-Q2_K_XL.gguf',
-    'UD-Q3_K_XL/GLM-4.5-Air-UD-Q3_K_XL-00001-of-00002.gguf'
-],
-    value="granite-4.0-h-tiny-UD-Q3_K_XL.gguf",
+# --- Gradio Komponenten (Dynamisch befüllt) ---
+model_dropdown = gr.Dropdown(
+    # Jetzt die dynamisch generierten Namen verwenden
+    choices=MODEL_DROPDOWN_CHOICES, 
+    value=MODEL_DROPDOWN_CHOICES[0] if MODEL_DROPDOWN_CHOICES else None, # Wählt den ersten Eintrag aus, falls vorhanden
     label="Model"
 )
 system_textbox = gr.Textbox(value="You are a deep thinking AI, you may use extremely long chains of thought to deeply consider the problem and deliberate with yourself via systematic reasoning processes to help come to a correct solution prior to answering. You should enclose your thoughts and internal monologue inside <think> </think> tags, and then provide your solution or response to the problem.", label="System message")
@@ -240,11 +251,11 @@ repeat_penalty_slider = gr.Slider(
     label="Repetition penalty",
 )
 
-# --- Gradio Chat Interface Definition (Fix implementiert) ---
+# --- Gradio Chat Interface Definition (Unverändert) ---
 demo = gr.ChatInterface(
     respond,
     type="messages",
-    chatbot=gr.Chatbot(placeholder=PLACEHOLDER, height=450, type="messages", label=False), 
+    chatbot=gr.Chatbot(placeholder=PLACEHOLDER, height=450, type="messages", label=False),
     additional_inputs=[
         model_dropdown,
         system_textbox,