Spaces:

Saffn
/

llm

Running

App Files Files Community

Saffn commited on 21 days ago

Commit

ebb692c

1 Parent(s): 03fb095

Fix UI compilation issues, rename app to Saffan Chat, add AI Persona & Skill presets

Browse files

Files changed (3) hide show

src/config.py +78 -3
src/engine.py +48 -6
src/ui.py +169 -38

src/config.py CHANGED Viewed

@@ -65,7 +65,7 @@ MODEL_CONFIGS = {
 }
 # The Leaked-Style System Prompt (inspired by Claude 3.5 Sonnet & ChatGPT Custom Instructions)
-SYSTEM_PROMPT = """You are a highly advanced AI coding assistant and researcher named Antigravity, engineered by the Google DeepMind team. You approach every interaction with objective precision, extreme intelligence, and structured depth.
 You must strictly adhere to the following behavioral and formatting rules:
@@ -85,11 +85,23 @@ You must strictly adhere to the following behavioral and formatting rules:
    - Adopt an objective, clear, and intellectual tone. Speak directly to the user.
    - Do not make assumptions. If a query is ambiguous, explain the ambiguity and outline the options or ask for clarification.
-3. KNOWLEDGE & CAPABILITIES:
    - You have access to real-time web search and web scraping tools. When web context is provided, rely on it to answer queries accurately and provide sources/citations where appropriate.
    - If you do not know the answer, admit it honestly.
-4. FORMATTING & CODE STYLE:
    - Use GitHub-style markdown for all responses.
    - Write clean, production-grade, fully commented code blocks.
    - Never write placeholders like `// TODO: implement this` or `...` in code outputs unless explicitly asked. Always write complete, copy-pasteable files.
@@ -99,6 +111,69 @@ You must strictly adhere to the following behavioral and formatting rules:
 Current Date/Time: {datetime}
 """
 # Premium Claude-Style Custom CSS for Gradio
 CLAUDE_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

 }
 # The Leaked-Style System Prompt (inspired by Claude 3.5 Sonnet & ChatGPT Custom Instructions)
+SYSTEM_PROMPT = """You are Saffan, a highly advanced AI coding assistant and researcher engineered by the Google DeepMind team. You approach every interaction with objective precision, extreme intelligence, and structured depth.
 You must strictly adhere to the following behavioral and formatting rules:
    - Adopt an objective, clear, and intellectual tone. Speak directly to the user.
    - Do not make assumptions. If a query is ambiguous, explain the ambiguity and outline the options or ask for clarification.
+3. CLAUDE-STYLE ARTIFACTS:
+   - If you are generating a complete document, webpage (HTML/JS/CSS), SVG graphic, or standalone script, you MUST wrap it inside a custom `<artifact>` tag.
+   - Do not print the raw code blocks in your regular markdown. Instead, enclose the entire code structure within the artifact block so it can be rendered side-by-side in the user interface.
+   - Syntax:
+     <artifact title="Title Description" type="html|code|svg" language="html|python|javascript|css">
+     [Insert complete code here]
+     </artifact>
+   - Example:
+     <artifact title="Interactive Calculator" type="html" language="html">
+     <!DOCTYPE html><html>...</html>
+     </artifact>
+4. KNOWLEDGE & CAPABILITIES:
    - You have access to real-time web search and web scraping tools. When web context is provided, rely on it to answer queries accurately and provide sources/citations where appropriate.
    - If you do not know the answer, admit it honestly.
+5. FORMATTING & CODE STYLE:
    - Use GitHub-style markdown for all responses.
    - Write clean, production-grade, fully commented code blocks.
    - Never write placeholders like `// TODO: implement this` or `...` in code outputs unless explicitly asked. Always write complete, copy-pasteable files.
 Current Date/Time: {datetime}
 """
+# Preset configurations representing different skills/prompts
+SYSTEM_PROMPTS = {
+    "Saffan Chat (Default)": SYSTEM_PROMPT,
+    "Python & Async Scraper Expert": """You are Saffan, an elite Python software engineer specializing in asynchronous programming (asyncio), web scraping, APIs, and microservice architectures.
+You must strictly adhere to the following behavioral and formatting rules:
+1. THOUGHT PROCESS (Chain of Thought):
+   - You MUST wrap your detailed reasoning inside a `<thinking>` block. Analyze async safety, concurrency, exception handling, and performance before writing code.
+   - Trace flow step-by-step.
+2. CLAUDE-STYLE ARTIFACTS:
+   - If generating a complete script or application, wrap it in a `<artifact>` block:
+     <artifact title="Script Description" type="code" language="python">
+     [Insert code here]
+     </artifact>
+3. PYTHON & ASYNC BEST PRACTICES:
+   - Always prefer asynchronous libraries like `aiohttp`, `httpx`, or `playwright` for remote calls.
+   - Use `asyncio.gather` for concurrent I/O operations.
+   - Always implement robust error handling (try/except blocks), rate-limiting, and user-agent rotation.
+   - Write fully typed Python code using the `typing` module.
+Current Date/Time: {datetime}
+""",
+    "Web UI & SVG Graphic Designer": """You are Saffan, a master frontend engineer, UI/UX architect, and SVG designer. Your specialty is building visually stunning, interactive single-page web applications and vectorized graphics.
+You must strictly adhere to the following behavioral and formatting rules:
+1. THOUGHT PROCESS (Chain of Thought):
+   - You MUST wrap your detailed reasoning inside a `<thinking>` block. Plan visual layout, color palette (e.g. slate/indigo, glassmorphism), CSS variables, and interaction flow first.
+2. CLAUDE-STYLE ARTIFACTS:
+   - Every webpage, interactive dashboard, or SVG graphic MUST be inside a `<artifact>` block:
+     <artifact title="Title" type="html|svg" language="html|xml">
+     [Insert complete code here]
+     </artifact>
+   - For HTML apps, include all styles in a `<style>` block and all behaviors in a `<script>` block. Do not rely on external CDN resources unless absolutely necessary (prefer pure CSS/JS). Make them fully interactive and responsive!
+3. MODERN STYLING:
+   - Use beautiful color palettes, smooth transitions, dark modes, modern typography, and hover effects. Ensure designs look highly premium.
+Current Date/Time: {datetime}
+""",
+    "Logical Reasoner & Tutor": """You are Saffan, a world-class educational tutor, scientist, and logical analyst. You excel at breaking down complex academic, philosophical, or mathematical concepts into clear, engaging, and structured explanations.
+You must strictly adhere to the following behavioral and formatting rules:
+1. THOUGHT PROCESS (Chain of Thought):
+   - You MUST wrap your detailed reasoning inside a `<thinking>` block. Dissect the logical steps, identify potential misconceptions, and outline the explanation strategy.
+2. FORMATTING:
+   - Use LaTeX for mathematical formulas (inline: \\( E=mc^2 \\), block: \\$\\$ \\sum_{i=1}^n i \\$\\$).
+   - Use analogies, step-by-step outlines, and markdown tables.
+   - Highlight key takeaways with bullet points.
+Current Date/Time: {datetime}
+"""
+}
 # Premium Claude-Style Custom CSS for Gradio
 CLAUDE_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap');

src/engine.py CHANGED Viewed

@@ -237,9 +237,45 @@ def format_thinking_tags(text: str) -> str:
         else:
             # Thinking block is still generating, render it open
             return f"{before_thinking}<details open class='thinking-block'><summary>Thinking Process...</summary>\n\n{rest.strip()}\n\n</details>"
-    return text
 def execute_chat(
     message: str,
     history: list,
     mode: str,
@@ -310,7 +346,7 @@ def execute_chat(
     # Prepare active prompt contents
     current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
-    compiled_system_prompt = system_prompt_preset.format(datetime=current_time)
     # Prepend search context to user query if found
     if search_context:
@@ -334,8 +370,11 @@ def execute_chat(
         for partial_text in api_stream:
             formatted_text = format_thinking_tags(partial_text)
-            full_response = status_update + formatted_text if status_update else formatted_text
-            yield history + [[message, full_response]], ""
     else:
         # Local CPU or Zero-GPU mode
@@ -372,5 +411,8 @@ def execute_chat(
         for partial_text in local_stream:
             formatted_text = format_thinking_tags(partial_text)
-            full_response = status_update + formatted_text if status_update else formatted_text
-            yield history + [[message, full_response]], ""

         else:
             # Thinking block is still generating, render it open
             return f"{before_thinking}<details open class='thinking-block'><summary>Thinking Process...</summary>\n\n{rest.strip()}\n\n</details>"
+def extract_artifacts(text: str) -> list:
+    """
+    Extracts all <artifact> blocks (including in-progress ones)
+    from the streaming text.
+    """
+    artifacts = []
+    # Match tags: <artifact title="x" type="y" language="z">content</artifact> or open tags at the end of text
+    pattern = r'<artifact\s+title="([^"]*)"\s+type="([^"]*)"\s+language="([^"]*)"\s*>(.*?)(?:</artifact>|$)'
+    matches = re.finditer(pattern, text, re.DOTALL)
+    for m in matches:
+        title = m.group(1) or "Untitled"
+        type_ = m.group(2) or "code"
+        lang = m.group(3) or "plaintext"
+        content = m.group(4)
+        artifacts.append({
+            "title": title,
+            "type": type_,
+            "language": lang,
+            "content": content.strip()
+        })
+    return artifacts
+def clean_chatbot_response(text: str) -> str:
+    """
+    Replaces <artifact> blocks in the response with a clean visual badge
+    so the raw code doesn't clutter the main chat viewport.
+    """
+    pattern = r'<artifact\s+title="([^"]*)"\s+type="([^"]*)"\s+language="([^"]*)"\s*>.*?(?:</artifact>|$)'
+    def replace_with_badge(match):
+        title = match.group(1) or "Untitled Artifact"
+        type_ = match.group(2) or "code"
+        return f"\n\n> ⚙️ **Artifact Generated:** *{title}* ({type_}) — *Rendered in the right-hand panel* ↗️\n\n"
+    return re.sub(pattern, replace_with_badge, text, flags=re.DOTALL)
 def execute_chat(
     message: str,
     history: list,
     mode: str,
     # Prepare active prompt contents
     current_time = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+    compiled_system_prompt = system_prompt_preset.replace("{datetime}", current_time)
     # Prepend search context to user query if found
     if search_context:
         for partial_text in api_stream:
             formatted_text = format_thinking_tags(partial_text)
+            artifacts = extract_artifacts(formatted_text)
+            clean_text = clean_chatbot_response(formatted_text)
+            full_response = status_update + clean_text if status_update else clean_text
+            yield history + [[message, full_response]], artifacts
     else:
         # Local CPU or Zero-GPU mode
         for partial_text in local_stream:
             formatted_text = format_thinking_tags(partial_text)
+            artifacts = extract_artifacts(formatted_text)
+            clean_text = clean_chatbot_response(formatted_text)
+            full_response = status_update + clean_text if status_update else clean_text
+            yield history + [[message, full_response]], artifacts

src/ui.py CHANGED Viewed

@@ -1,6 +1,6 @@
 import gradio as gr
 import torch
-from src.config import MODEL_CONFIGS, SYSTEM_PROMPT, CLAUDE_CSS
 from src.engine import execute_chat, HAS_SPACES
 def get_hardware_status():
@@ -30,7 +30,6 @@ def execute_chat_ui(
     history,
     mode,
     model_name,
     system_prompt_preset,
     max_new_tokens,
     temperature,
@@ -44,7 +43,6 @@ def execute_chat_ui(
     """
     if history is None or len(history) == 0:
         return
     # Extract latest user message and the history preceding it
     user_message = history[-1][0]
@@ -64,8 +62,56 @@ def execute_chat_ui(
         hf_token=hf_token
     )
-    for updated_history, _ in chat_generator:
-        yield updated_history
 def build_interface():
     """Constructs the Gradio user interface using custom styles and themes."""
@@ -85,7 +131,7 @@ def build_interface():
         border_color_primary_dark="rgba(255, 255, 255, 0.08)"
     )
-    with gr.Blocks(theme=theme, css=CLAUDE_CSS, title="Antigravity Chat") as demo:
         # State to store the raw message during submission sequence
         with gr.Row():
@@ -94,7 +140,7 @@ def build_interface():
                     """
                     <div style="text-align: center; margin-bottom: 24px; margin-top: 10px;">
                         <h1 style="font-size: 2.8em; margin-bottom: 5px; background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
-                            ANTIGRAVITY CHAT
                         </h1>
                         <p style="font-size: 1.1em; color: #9ca3af; max-width: 600px; margin: 0 auto;">
                             A premium Claude-style chatbot environment designed for Hugging Face free tier.
@@ -155,6 +201,13 @@ def build_interface():
                 # Advanced Settings Accordion
                 with gr.Accordion("🛠️ Advanced Parameters", open=False):
                     system_prompt = gr.Textbox(
                         label="System Instruction Prompt",
                         value=SYSTEM_PROMPT,
@@ -189,33 +242,84 @@ def build_interface():
                 # System actions
                 clear_btn = gr.Button("🗑️ Clear Chat History", variant="secondary", elem_classes=["secondary-btn"])
-            # Main Chat Area
             with gr.Column(scale=9):
-                chatbot = gr.Chatbot(
-                    label="Chat Window",
-                    elem_classes=["chatbot-container"],
-                    show_label=False,
-                    avatar_images=(None, "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"),
-                    height=580,
-                    bubble_full_width=False,
-                    type="tuples"
-                )
                 with gr.Row():
-                    input_box = gr.Textbox(
-                        placeholder="Ask Antigravity anything... (e.g., 'What happened in AI news this week?' with search on)",
-                        show_label=False,
-                        scale=10
-                    )
-                    submit_btn = gr.Button("Send", variant="primary", scale=1, elem_classes=["action-btn"])
-                # Prompts suggestions
-                gr.Markdown("💡 **Quick Prompts**")
-                with gr.Row():
-                    suggestion_1 = gr.Button("Draft a clean Python function using asyncio to scrape web data.", variant="secondary", elem_classes=["secondary-btn"])
-                    suggestion_2 = gr.Button("Search the web for the latest advancements in LLM reasoning models.", variant="secondary", elem_classes=["secondary-btn"])
-                    suggestion_3 = gr.Button("Explain quantum computing superposition using a simple real-life analogy.", variant="secondary", elem_classes=["secondary-btn"])
         # Define UI event linkages
@@ -226,6 +330,13 @@ def build_interface():
             outputs=[model_dropdown]
         )
         # 2. Main submit event chain (for Enter key submit)
         submit_event = input_box.submit(
             fn=add_user_message,
@@ -245,7 +356,7 @@ def build_interface():
                 enable_search,
                 hf_token
             ],
-            outputs=[chatbot]
         )
         # 3. Submit button click event chain
@@ -267,20 +378,40 @@ def build_interface():
                 enable_search,
                 hf_token
             ],
-            outputs=[chatbot]
         )
-        # 4. Clear chat history button event
-        clear_btn.click(fn=lambda: [], outputs=chatbot, queue=False)
-        # 5. Suggestion prompt buttons click events
         def load_suggestion(text):
             search_enabled = "Search the web" in text or "latest advancements" in text
             return text, search_enabled
         suggestion_1.click(
             fn=lambda: load_suggestion("Draft a clean Python function using asyncio to scrape web data."),
             outputs=[input_box, enable_search]

 import gradio as gr
 import torch
+from src.config import MODEL_CONFIGS, SYSTEM_PROMPT, SYSTEM_PROMPTS, CLAUDE_CSS
 from src.engine import execute_chat, HAS_SPACES
 def get_hardware_status():
     history,
     mode,
     model_name,
     system_prompt_preset,
     max_new_tokens,
     temperature,
     """
     if history is None or len(history) == 0:
         return
     # Extract latest user message and the history preceding it
     user_message = history[-1][0]
         hf_token=hf_token
     )
+    for updated_history, artifacts in chat_generator:
+        yield updated_history, artifacts
+def load_selected_artifact(selected_title, artifacts):
+    """Retrieves and formats code/render outputs for a selected artifact."""
+    if not selected_title or not artifacts:
+        return "", "", "plaintext"
+    for art in artifacts:
+        if art["title"] == selected_title:
+            content = art["content"]
+            if art["type"] == "html":
+                # Render HTML inside a secure data URI iframe to isolate it from Gradio styles
+                import urllib.parse
+                escaped_content = urllib.parse.quote(content)
+                iframe_render = f'<iframe src="data:text/html;charset=utf-8,{escaped_content}" style="width: 100%; height: 500px; border: none; border-radius: 8px; background-color: white;"></iframe>'
+                return content, iframe_render, art["language"]
+            elif art["type"] == "svg":
+                # Render SVG directly
+                svg_render = f'<div style="background-color: white; padding: 20px; border-radius: 8px; text-align: center; display: flex; justify-content: center; align-items: center;">{content}</div>'
+                return content, svg_render, "xml"
+            else:
+                # Code content (no render preview available)
+                no_render_placeholder = '<div style="padding: 40px; text-align: center; color: #9ca3af;">No visual render preview available for this code type. Use the "Source Code" tab to view.</div>'
+                return content, no_render_placeholder, art["language"]
+    return "", "", "plaintext"
+def update_artifacts_ui(artifacts):
+    """Refreshes the state and visibility of components inside the Artifacts Panel."""
+    if not artifacts:
+        return (
+            gr.Dropdown(choices=[], value=None, visible=False),
+            gr.Markdown(visible=True),
+            gr.Code(value="", visible=False),
+            gr.HTML(value="", visible=False)
+        )
+    choices = [art["title"] for art in artifacts]
+    default_val = choices[-1]
+    code_content, render_html, lang = load_selected_artifact(default_val, artifacts)
+    return (
+        gr.Dropdown(choices=choices, value=default_val, visible=True),
+        gr.Markdown(visible=False),
+        gr.Code(value=code_content, language=lang, visible=True),
+        gr.HTML(value=render_html, visible=True)
+    )
 def build_interface():
     """Constructs the Gradio user interface using custom styles and themes."""
         border_color_primary_dark="rgba(255, 255, 255, 0.08)"
     )
+    with gr.Blocks(theme=theme, css=CLAUDE_CSS, title="Saffan Chat") as demo:
         # State to store the raw message during submission sequence
         with gr.Row():
                     """
                     <div style="text-align: center; margin-bottom: 24px; margin-top: 10px;">
                         <h1 style="font-size: 2.8em; margin-bottom: 5px; background: linear-gradient(90deg, #60a5fa, #a78bfa); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+                            SAFFAN CHAT
                         </h1>
                         <p style="font-size: 1.1em; color: #9ca3af; max-width: 600px; margin: 0 auto;">
                             A premium Claude-style chatbot environment designed for Hugging Face free tier.
                 # Advanced Settings Accordion
                 with gr.Accordion("🛠️ Advanced Parameters", open=False):
+                    system_preset_dropdown = gr.Dropdown(
+                        choices=list(SYSTEM_PROMPTS.keys()),
+                        value="Saffan Chat (Default)",
+                        label="Select AI Persona / Skill Mode",
+                        interactive=True
+                    )
                     system_prompt = gr.Textbox(
                         label="System Instruction Prompt",
                         value=SYSTEM_PROMPT,
                 # System actions
                 clear_btn = gr.Button("🗑️ Clear Chat History", variant="secondary", elem_classes=["secondary-btn"])
+            # Main Chat & Artifacts Area
             with gr.Column(scale=9):
+                # Conversation-scoped state to hold parsed artifacts
+                artifacts_state = gr.State(value=[])
                 with gr.Row():
+                    # Left Column: Chat Viewport
+                    with gr.Column(scale=6):
+                        chatbot = gr.Chatbot(
+                            label="Chat Window",
+                            elem_classes=["chatbot-container"],
+                            show_label=False,
+                            avatar_images=(None, "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"),
+                            height=580,
+                            bubble_full_width=False,
+                            type="tuples"
+                        )
+                        with gr.Row():
+                            input_box = gr.Textbox(
+                                placeholder="Ask Saffan anything... (e.g., 'Draft a clean Python function using asyncio to scrape web data.')",
+                                show_label=False,
+                                scale=10
+                            )
+                            submit_btn = gr.Button("Send", variant="primary", scale=1, elem_classes=["action-btn"])
+                        # Prompts suggestions
+                        gr.Markdown("💡 **Quick Prompts**")
+                        with gr.Row():
+                            suggestion_1 = gr.Button("Draft a clean Python function using asyncio to scrape web data.", variant="secondary", elem_classes=["secondary-btn"])
+                            suggestion_2 = gr.Button("Search the web for the latest advancements in LLM reasoning models.", variant="secondary", elem_classes=["secondary-btn"])
+                            suggestion_3 = gr.Button("Explain quantum computing superposition using a simple real-life analogy.", variant="secondary", elem_classes=["secondary-btn"])
+                    # Right Column: Claude-Style Artifacts Panel
+                    with gr.Column(scale=5, elem_classes=["sidebar-panel"]):
+                        gr.HTML(
+                            """
+                            <div style="border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 10px; margin-bottom: 15px;">
+                                <h3 style="margin: 0; font-size: 1.25em; color: #60a5fa; display: flex; align-items: center; gap: 8px;">
+                                    🎨 Claude-Style Artifacts
+                                </h3>
+                                <p style="margin: 3px 0 0 0; font-size: 0.8em; color: #9ca3af;">
+                                    Interactive HTML/SVG rendering and source code viewer.
+                                </p>
+                            </div>
+                            """
+                        )
+                        # Artifact Selector Dropdown
+                        artifact_selector = gr.Dropdown(
+                            label="Select Artifact",
+                            choices=[],
+                            value=None,
+                            visible=False,
+                            interactive=True
+                        )
+                        # No Artifacts Placeholder Description
+                        artifact_placeholder = gr.Markdown(
+                            "**No active artifacts.**\n\nWhen Saffan generates complete webpages, SVG graphics, or scripts, they will appear here side-by-side automatically.",
+                            visible=True
+                        )
+                        # Tabs for Preview Render and Code Source
+                        with gr.Tabs() as artifact_tabs:
+                            with gr.Tab("Preview"):
+                                artifact_render = gr.HTML(
+                                    value="",
+                                    visible=False
+                                )
+                            with gr.Tab("Source Code"):
+                                artifact_code = gr.Code(
+                                    value="",
+                                    language="plaintext",
+                                    interactive=False,
+                                    wrap_lines=True,
+                                    visible=False
+                                )
         # Define UI event linkages
             outputs=[model_dropdown]
         )
+        # Preset dropdown change updates the system prompt textbox content
+        system_preset_dropdown.change(
+            fn=lambda preset: SYSTEM_PROMPTS.get(preset, SYSTEM_PROMPT),
+            inputs=[system_preset_dropdown],
+            outputs=[system_prompt]
+        )
         # 2. Main submit event chain (for Enter key submit)
         submit_event = input_box.submit(
             fn=add_user_message,
                 enable_search,
                 hf_token
             ],
+            outputs=[chatbot, artifacts_state]
         )
         # 3. Submit button click event chain
                 enable_search,
                 hf_token
             ],
+            outputs=[chatbot, artifacts_state]
         )
+        # 4. State change triggers UI update for the Artifacts panel
+        artifacts_state.change(
+            fn=update_artifacts_ui,
+            inputs=[artifacts_state],
+            outputs=[artifact_selector, artifact_placeholder, artifact_code, artifact_render]
+        )
+        # 5. Dropdown change updates the content panel
+        def handle_selector_change(selected_title, artifacts):
+            if not selected_title or not artifacts:
+                return gr.update(value="", visible=False), gr.update(value="", visible=False)
+            code_content, render_html, lang = load_selected_artifact(selected_title, artifacts)
+            return (
+                gr.Code(value=code_content, language=lang, visible=True),
+                gr.HTML(value=render_html, visible=True)
+            )
+        artifact_selector.change(
+            fn=handle_selector_change,
+            inputs=[artifact_selector, artifacts_state],
+            outputs=[artifact_code, artifact_render]
+        )
+        # 6. Clear chat history button event (also clears artifacts state)
+        clear_btn.click(fn=lambda: ([], []), outputs=[chatbot, artifacts_state], queue=False)
+        # 7. Suggestion prompt buttons click events
         def load_suggestion(text):
             search_enabled = "Search the web" in text or "latest advancements" in text
             return text, search_enabled
         suggestion_1.click(
             fn=lambda: load_suggestion("Draft a clean Python function using asyncio to scrape web data."),
             outputs=[input_box, enable_search]