Update app.py

app.py

@@ -35,20 +35,24 @@ DEFAULT_SYSTEM_PROMPT = (
 # Prompt building
 # ---------------------------------------------------------------------
 
+
 def build_prompt(system_prompt, context, history, user_message):
     messages = []
 
-    if system_prompt.strip():
+    if system_prompt and system_prompt.strip():
         messages.append({"role": "system", "content": system_prompt})
 
-    if context.strip():
-        messages.append({
-            "role": "system",
-            "content": (
-                "The following information is additional context. "
-                "Use it only if relevant:\n" + context
-            )
-        })
+    if context and context.strip():
+        messages.append(
+            {
+                "role": "system",
+                "content": (
+                    "The following information is additional context. "
+                    "Use it only if it is relevant to the user's request:\n"
+                    f"{context}"
+                ),
+            }
+        )
 
     for user, assistant in history:
         messages.append({"role": "user", "content": user})
@@ -56,18 +60,19 @@ def build_prompt(system_prompt, context, history, user_message):
 
     messages.append({"role": "user", "content": user_message})
 
-    return tokenizer.apply_chat_template(
+    prompt = tokenizer.apply_chat_template(
         messages,
         tokenize=False,
         add_generation_prompt=True,
     )
+    return prompt
 
 
 def generate_answer(system_prompt, context, message, history, max_tokens, temperature, top_p):
     if history is None:
         history = []
 
-    if not system_prompt.strip():
+    if not system_prompt or system_prompt.strip() == "":
         system_prompt = DEFAULT_SYSTEM_PROMPT
 
     max_tokens = int(min(max_tokens, 128))
@@ -92,65 +97,156 @@ def generate_answer(system_prompt, context, message, history, max_tokens, temper
 
     decoded = tokenizer.decode(outputs[0], skip_special_tokens=True)
 
-    # Try to extract only the new part
-    answer = decoded[len(prompt):].strip() if decoded.startswith(prompt) else decoded.strip()
+    if decoded.startswith(prompt):
+        answer = decoded[len(prompt):].strip()
+    else:
+        answer = decoded.strip()
 
     history.append([message, answer])
     return answer, history
 
 
 def chat(message, history, system_prompt, context, max_tokens, temperature, top_p):
-    answer, history = generate_answer(
+    if history is None:
+        history = []
+
+    _, history = generate_answer(
         system_prompt, context, message, history, max_tokens, temperature, top_p
     )
+    # limpiamos el textbox de input
     return "", history
 
+
 # ---------------------------------------------------------------------
-# Minimalist ChatGPT-style UI
+# UI estilo landing / glassmorphism
 # ---------------------------------------------------------------------
 
 CSS = """
-#container {max-width: 1200px; margin-left: auto; margin-right: auto;}
-#chat-column {width: 75%;}
-#sidebar {width: 25%; padding-left: 20px;}
-#input-row {margin-top: 12px;}
+body {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+  background: radial-gradient(circle at 0% 0%, #ffe3f2 0%, #e2f1ff 40%, #fff6e5 80%);
+}
+
+/* centrar contenido y limitar ancho */
+#main-container {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* columnas izquierda/derecha */
+#left-panel {
+  padding-right: 32px;
+}
+
+#right-panel {
+  display: flex;
+  justify-content: center;
+}
+
+/* card del chat */
+#chat-card {
+  width: 100%;
+  max-width: 520px;
+  background: rgba(255, 255, 255, 0.82);
+  border-radius: 24px;
+  padding: 18px 18px 14px 18px;
+  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
+  backdrop-filter: blur(18px);
+}
+
+/* título y subtítulo lado izquierdo */
+#hero-title {
+  font-size: 2.4rem;
+  line-height: 1.1;
+  font-weight: 600;
+  color: #111827;
+}
+
+#hero-subtitle {
+  margin-top: 0.75rem;
+  font-size: 1rem;
+  color: #4b5563;
+}
+
+/* badges */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(148, 163, 184, 0.6);
+  font-size: 0.75rem;
+  color: #4b5563;
+  background: rgba(255,255,255,0.7);
+}
+
+/* labels minimalistas */
+label { font-size: 0.78rem !important; }
+
+/* chatbot */
+#chatbot {
+  background: transparent;
+  border: none;
+}
+
+/* quitar el header por defecto del chatbot */
+#chatbot > div:nth-child(1) {
+  display: none;
+}
+
+/* caja del input */
+#input-row {
+  margin-top: 10px;
+}
+
+#message-box textarea {
+  border-radius: 999px !important;
+}
+
+/* botones */
+button {
+  border-radius: 999px !important;
+}
+
+#send-btn {
+  height: 40px;
+}
+
+#clear-btn {
+  margin-top: 8px;
+}
 """
 
 with gr.Blocks(css=CSS) as demo:
-    gr.Markdown("<h2 style='font-weight:600;'>Iris – Your Fine-Tuned Llama 3 Assistant</h2>")
+    with gr.Row(elem_id="main-container"):
+        # LEFT: hero + context + settings
+        with gr.Column(scale=5, elem_id="left-panel"):
+            gr.Markdown(
+                """
+                <div class="badge">Custom AI · Fine-tuned Llama 3</div>
+                <h1 id="hero-title">Iris – Custom AI assistant trained on your data.</h1>
+                <p id="hero-subtitle">
+                  Add context on the left, chat on the right. 
+                  Iris will adapt to your instructions and extra data in real time.
+                </p>
+                """,
+            )
 
-    with gr.Row(elem_id="container"):
-        # LEFT SIDE: CHAT
-        with gr.Column(elem_id="chat-column"):
-            chatbot = gr.Chatbot(
-                height=500,
+            gr.Markdown("#### Context")
+            context_box = gr.Textbox(
+                placeholder="Paste any reference text, notes, or documents you want Iris to use as context.",
+                lines=7,
                 show_label=False,
             )
 
-            with gr.Row(elem_id="input-row"):
-                msg = gr.Textbox(
-                    placeholder="Send a message...",
-                    scale=8,
-                    show_label=False,
-                )
-                send_btn = gr.Button("Send", scale=2)
-
-        # RIGHT SIDE: SIDEBAR
-        with gr.Column(elem_id="sidebar"):
-            gr.Markdown("### Settings")
-
+            gr.Markdown("#### Behavior")
             system_prompt_box = gr.Textbox(
-                label="System prompt",
                 value=DEFAULT_SYSTEM_PROMPT,
                 lines=5,
+                show_label=False,
             )
 
-            context_box = gr.Textbox(
-                label="Context",
-                placeholder="Optional reference text...",
-                lines=6,
-            )
-
+            gr.Markdown("#### Generation settings")
             max_tokens_slider = gr.Slider(
                 label="Max tokens",
                 minimum=32,
@@ -158,7 +254,6 @@ with gr.Blocks(css=CSS) as demo:
                 value=128,
                 step=16,
             )
-
             temperature_slider = gr.Slider(
                 label="Temperature",
                 minimum=0.1,
@@ -166,7 +261,6 @@ with gr.Blocks(css=CSS) as demo:
                 value=0.7,
                 step=0.1,
             )
-
             top_p_slider = gr.Slider(
                 label="Top-p",
                 minimum=0.1,
@@ -175,10 +269,49 @@ with gr.Blocks(css=CSS) as demo:
                 step=0.05,
             )
 
-            clear_btn = gr.Button("Clear chat")
+        # RIGHT: chat card
+        with gr.Column(scale=7, elem_id="right-panel"):
+            with gr.Column(elem_id="chat-card"):
+                gr.Markdown(
+                    """
+                    <div style="display:flex; align-items:center; gap:6px; margin-bottom:8px;">
+                      <div style="width:10px;height:10px;border-radius:999px;background:#f97373;"></div>
+                      <div style="width:10px;height:10px;border-radius:999px;background:#facc15;"></div>
+                      <div style="width:10px;height:10px;border-radius:999px;background:#4ade80;"></div>
+                    </div>
+                    <div style="font-size:0.85rem;color:#6b7280;margin-bottom:6px;">
+                      Hi there, ask me anything.
+                    </div>
+                    """,
+                )
+
+                chatbot = gr.Chatbot(
+                    height=360,
+                    show_label=False,
+                    elem_id="chatbot",
+                )
 
-    # Chat events
-    inputs = [msg, chatbot, system_prompt_box, context_box, max_tokens_slider, temperature_slider, top_p_slider]
+                with gr.Row(elem_id="input-row"):
+                    msg = gr.Textbox(
+                        placeholder="Ask a question...",
+                        scale=8,
+                        show_label=False,
+                        elem_id="message-box",
+                    )
+                    send_btn = gr.Button("Send", scale=2, elem_id="send-btn")
+
+                clear_btn = gr.Button("Clear chat", elem_id="clear-btn")
+
+    # wiring
+    inputs = [
+        msg,
+        chatbot,
+        system_prompt_box,
+        context_box,
+        max_tokens_slider,
+        temperature_slider,
+        top_p_slider,
+    ]
     outputs = [msg, chatbot]
 
     msg.submit(chat, inputs, outputs)