search for images, videos, links, and follow up questions working nice

.gitignore

@@ -1,4 +1,3 @@
-prompts.md
 .env
 .venv
 __pycache__

app.py

@@ -2,10 +2,14 @@ import os
 import gradio as gr
 from bagoodex_client import BagoodexClient
 from r_types import ChatMessage
-from prompts import SYSTEM_PROMPT_FOLLOWUP, SYSTEM_PROMPT_MAP, SYSTEM_PROMPT_BASE
+from prompts import (
+    SYSTEM_PROMPT_FOLLOWUP, 
+    SYSTEM_PROMPT_MAP, 
+    SYSTEM_PROMPT_BASE, 
+    SYSTEM_PROMPT_KNOWLEDGE_BASE
+)
 from helpers import (
     embed_video,
-    embed_image,
     format_links,
     embed_google_map,
     format_knowledge,
@@ -64,18 +68,22 @@ def handle_local_map_click(followup_state, chat_history_state):
         return chat_history_state
     try:
         result = client.get_local_map(followup_state)
-        map_url = result.get('link', '')
-        # Use helper to produce an embedded map iframe
-        html = embed_google_map(map_url)
+
+        if result:
+            map_url = result.get('link', '')
+            # Use helper to produce an embedded map iframe
+            html = embed_google_map(map_url)
+
+            # Fall back: use the base_qna call with SYSTEM_PROMPT_MAP
+            result = client.base_qna(
+                messages=chat_history_state, system_prompt=SYSTEM_PROMPT_MAP
+            )
+            # Assume result contains a 'link' field
+            html = embed_google_map(result.get('link', ''))
+        new_message = ChatMessage({"role": "assistant", "content": html})
+        return chat_history_state + [new_message]
     except Exception:
-        # Fall back: use the base_qna call with SYSTEM_PROMPT_MAP
-        result = client.base_qna(
-            messages=chat_history_state, system_prompt=SYSTEM_PROMPT_MAP
-        )
-        # Assume result contains a 'link' field
-        html = embed_google_map(result.get('link', ''))
-    new_message = ChatMessage({"role": "assistant", "content": html})
-    return chat_history_state + [new_message]
+        return chat_history_state
 
 def handle_knowledge_click(followup_state, chat_history_state):
     """
@@ -83,10 +91,23 @@ def handle_knowledge_click(followup_state, chat_history_state):
     """
     if not followup_state:
         return chat_history_state
-    result = client.get_knowledge(followup_state)
-    md = format_knowledge(result)
-    new_message = ChatMessage({"role": "assistant", "content": md})
-    return chat_history_state + [new_message]
+
+    try:
+        print('trying to get knowledge')
+        result = client.get_knowledge(followup_state)
+        knowledge_md = format_knowledge(result)
+
+        if knowledge_md == 0000:
+            print('falling back to base_qna')
+            # Fall back: use the base_qna call with SYSTEM_PROMPT_KNOWLEDGE_BASE
+            result = client.base_qna(
+                messages=chat_history_state, system_prompt=SYSTEM_PROMPT_KNOWLEDGE_BASE
+            )
+            knowledge_md = format_knowledge(result)
+        new_message = ChatMessage({"role": "assistant", "content": knowledge_md})
+        return chat_history_state + [new_message]
+    except Exception:
+        return chat_history_state
 
 # ----------------------------
 # Advanced Search Functions
@@ -120,6 +141,9 @@ css = """
 }
 """
 
+
+# defautl query: how to make slingshot?
+# who created light (e.g., electricity) Tesla or Edison in quick short?
 with gr.Blocks(css=css, fill_height=True) as demo:
     # State variables to hold followup ID and conversation history, plus follow-up questions text
     followup_state = gr.State(None)
@@ -129,8 +153,8 @@ with gr.Blocks(css=css, fill_height=True) as demo:
     with gr.Row():
         with gr.Column(scale=3):
             with gr.Row():
-                btn_local_map = gr.Button("Local Map Search", variant="secondary", size="sm")
-                btn_knowledge = gr.Button("Knowledge Base", variant="secondary", size="sm")
+                btn_local_map = gr.Button("Local Map Search (coming soon...)", variant="secondary", size="sm", interactive=False)
+                btn_knowledge = gr.Button("Knowledge Base (coming soon...)", variant="secondary", size="sm", interactive=False)
             # The ChatInterface now uses additional outputs for both followup_state and conversation history,
             # plus follow-up questions Markdown.
             chat = gr.ChatInterface(
@@ -150,34 +174,40 @@ with gr.Blocks(css=css, fill_height=True) as demo:
                 inputs=[followup_state, chat_history_state],
                 outputs=chat.chatbot
             )
-            # Below the chat input, display follow-up questions and let user select one.
+
+            # Radio-based follow-up questions
             followup_radio = gr.Radio(
-                choices=[], label="Follow-up Questions (select one and click Send Follow-up)"
+                choices=[], 
+                label="Follow-up Questions (select one and click 'Send Follow-up')"
             )
             btn_send_followup = gr.Button("Send Follow-up")
-            # When a follow-up question is sent, update the chat conversation, followup state, and follow-up list.
+
+            # When the user clicks "Send Follow-up", the selected question is passed
+            # to handle_followup_click
             btn_send_followup.click(
                 fn=handle_followup_click,
                 inputs=[followup_radio, followup_state, chat_history_state],
                 outputs=[chat.chatbot, followup_state, followup_md_state]
             )
-            # Also display the follow-up questions markdown (for reference) in a Markdown component.
-            followup_markdown = gr.Markdown(label="Follow-up Questions", value="", visible=True)
-            # When the followup_md_state updates, also update the radio choices.
+
+            # Update the radio choices when followup_md_state changes
             def update_followup_radio(md_text):
-                # Assume the helper output is a Markdown string with list items.
-                # We split the text to extract the question lines.
+                """
+                Parse Markdown lines to extract questions starting with '- '.
+                """
                 lines = md_text.splitlines()
                 questions = []
                 for line in lines:
                     if line.startswith("- "):
                         questions.append(line[2:])
-                return gr.update(choices=questions, value=None), md_text
+                return gr.update(choices=questions, value=None)
+
             followup_md_state.change(
                 fn=update_followup_radio,
                 inputs=[followup_md_state],
-                outputs=[followup_radio, followup_markdown]
+                outputs=[followup_radio]
             )
+
         with gr.Column(scale=1):
             gr.Markdown("### Advanced Search Options")
             with gr.Column(variant="panel"):

helpers.py

@@ -4,7 +4,7 @@ import gradio as gr
 import urllib.parse
 import re
 from pytube import YouTube
-from typing import List, Optional
+from typing import List, Optional, Dict
 from r_types import (
     SearchVideosResponse,
     SearchImagesResponse,
@@ -12,6 +12,7 @@ from r_types import (
     LocalMapResponse,
     KnowledgeBaseResponse
 )
+import json
 
 
 def get_video_id(url: str) -> Optional[str]:
@@ -68,45 +69,10 @@ def embed_video(videos: List[SearchVideosResponse]) -> str:
     # Join all iframes into one HTML string
     return "\n".join(iframes)
 
+def get_video_thumbnail(videos: List[SearchVideosResponse]) -> str:
+    pass
 
-def embed_image(json_data: SearchImagesResponse) -> str:
-    """
-    Given image data with 'original' (URL) and 'title',
-    returns an HTML string with an <img> tag.
-    """
-    title = json_data.get("title", "").replace('"', '\\"')
-    original = json_data.get("original", "")
-
-    if not original:
-        return "<p>No image URL provided.</p>"
-
-    embed_html = f"""
-    <img src="{original}" alt="{title}" style="width:100%">
-    """
-    return embed_html
-
-
-def build_search_links_response(urls: List[str]) -> List[SearchLinksResponse]:
-    """
-    Convert raw URLs into a list of dicts,
-    each with 'title' and 'link' keys for display.
-    """
-    results = []
-    for url in urls:
-        # Extract the last part of the URL as a rough "title"
-        raw_title = url.rstrip("/").split("/")[-1]
-
-        # Decode URL-encoded entities like %20
-        decoded_title = urllib.parse.unquote(raw_title)
-
-        # Replace hyphens/underscores with spaces
-        nice_title = decoded_title.replace("_", " ").replace("-", " ")
-
-        results.append({"title": nice_title, "link": url})
-    return results
-
-
-def format_links(links: List[SearchLinksResponse]) -> str:
+def format_links(links) -> str:
     """
     Convert a list of {'title': str, 'link': str} objects
     into a bulleted Markdown string with clickable links.
@@ -114,9 +80,10 @@ def format_links(links: List[SearchLinksResponse]) -> str:
     if not links:
         return "No links found."
 
-    links_md = "### Links\n\n"
-    for item in links:
-        links_md += f"- [{item['title']}]({item['link']})\n"
+    links_md = "**Links:**\n"
+    for url in links:
+        title = url.rstrip('/').split('/')[-1]
+        links_md += f"- [{title}]({url})\n"
     return links_md
 
 
@@ -157,34 +124,86 @@ def embed_google_map(map_url: str) -> str:
     return embed_html
 
 
-def format_knowledge(result: KnowledgeBaseResponse) -> str:
+def format_knowledge(raw_result: str) -> str:
     """
     Given a dictionary of knowledge data (e.g., about a person),
     produce a Markdown string summarizing that info.
     """
-    title = result.get("title", "Unknown")
-    type_ = result.get("type", "")
-    born = result.get("born", "")
-    died = result.get("died", "")
-
-    content = f"""
-**{title}**  
-Type: {type_}  
-Born: {born}  
-Died: {died}
-    """
-    return content
+
+    if not raw_result:
+        return 0000
+    
+    # Clean up the raw JSON string
+    clean_json_str = cleanup_raw_json(raw_result)
+    print('Knowledge Data: ', clean_json_str)
+
+    try:
+        # Parse the cleaned JSON string
+        result = json.loads(clean_json_str)
+        title = result.get("title", "...")
+        type_ = result.get("type", "...")
+        born = result.get("born", "...")
+        died = result.get("died", "...")
+
+        content = f"""
+    **{title}**  
+    Type: {type_}  
+    Born: {born}  
+    Died: {died}
+        """
+        return content
+    except json.JSONDecodeError:
+        return "Error: Failed to parse knowledge data."
 
 
-def format_followup_questions(questions: List[str]) -> str:
+
+def format_followup_questions(raw_questions: str) -> str:
     """
-    Given a list of follow-up questions, return a Markdown string
-    with each question as a bulleted list item.
+    Extracts and formats follow-up questions from a raw JSON-like string.
+
+    The input string may contain triple backticks (```json ... ```) which need to be removed before parsing.
+
+    Expected input format:
+    ```json
+    {
+        "followup_question": [
+            "What materials are needed to make a slingshot?", 
+            "How to make a slingshot more powerful?"
+        ]
+    }
+    ```
+
+    Returns a Markdown-formatted string with the follow-up questions.
     """
-    if not questions:
-        return "No follow-up questions provided."
 
-    questions_md = "### Follow-up Questions\n\n"
-    for question in questions:
-        questions_md += f"- {question}\n"
-    return questions_md
+    if not raw_questions:
+        return "No follow-up questions available."
+    
+    # Clean up the raw JSON string
+    clean_json_str = cleanup_raw_json(raw_questions)
+
+    try:
+        # Parse the cleaned JSON string
+        questions_dict = json.loads(clean_json_str)
+        
+        # Ensure the expected key exists
+        followup_list = questions_dict.get("followup_question", [])
+        
+        if not isinstance(followup_list, list) or not followup_list:
+            return "No follow-up questions available."
+
+        # Format the questions into Markdown
+        questions_md = "### Follow-up Questions\n\n"
+        for question in followup_list:
+            questions_md += f"- {question}\n"
+
+        return questions_md
+    
+    except json.JSONDecodeError:
+        return "Error: Failed to parse follow-up questions."
+
+def cleanup_raw_json(raw_json: str) -> str:
+    """
+    Remove triple backticks and 'json' from the beginning and end of a raw JSON string.
+    """
+    return re.sub(r"```json|```", "", raw_json).strip()

prompts-followup.md

@@ -0,0 +1,1453 @@
+[initial_prompt]:
+
+Here is the website on: "How to Create a Chatbot with Gradio" -> "https://www.gradio.app/guides/creating-a-chatbot-fast". I believe you can scrape and learn on the go. So could you tell me what tutorial is <next page> (just checking). If you succeed to answer we will proceed with you. I have great proposal to you.
+
+[follow_up]:
+
+Great. Thats correct!!
+Please take a deep breath.
+Now, let's proceed with the building real world Gradio app. 
+I will guide you through the process. Let's start with the first step.
+
+# UI/UX for Bagoodex Search API
+
+## Few things to note:
+
+0. UI is just a simple chatbot interface by default. We can devide into two parts. Left side for the chat (e.g., ChatGPT UI) and right side for the Advanced Search options. (It's like Perplexity UI. in any case refer to "https://www.perplexity.ai/".).
+1. We will be using Gradio to create a simple UI for the Bagoodex Search API.
+2. The API delivers real-time AI-powered web search with NLP capabilities.
+3. The API can be used to search for links, images, videos, local maps, and knowledge about a topic.
+4. Our Gradio app should be configurable from user side. (refer to [advanced search syntax](#advanced-search-syntax)).
+
+## Requirements:
+
+0. As you will see below output is already known. We need to create classes for each type of search. It makes the code more readable and maintainable.
+1. When user enters a query, the defautl chat API endpoint should return the results based on the query.
+2. On the right side list the advanced search options (e.g., images, videos). 
+For example (in NextJS): 
+<div className="flex flex-col gap-2">
+<div className="border border-gray-300 px-3 py-2 rounded-md flex items-center justify-between">
+  <p>Search Images</p>
+  <button className="bg-blue-500 text-white px-2 py-1 rounded-md">[plus icon that sends request]</button>
+</div>
+<div className="border border-gray-300 px-3 py-2 rounded-md flex items-center justify-between">
+  <p>Search Videos</p>
+  <button className="bg-blue-500 text-white px-2 py-1 rounded-md">[plus icon that sends request]</button>
+</div>
+</div>
+
+(It's like Perplexity UI/UX.).
+
+3. On input field we should add several buttons for the rest of the advanced search options. 
+For example: 
+1) user can click on "local maps" and activate it. So in addition to the results we should display and render the map using Gradio specific components.
+2) user can click on "knowledge about a topic" that will return a structured knowledge base about the topic. If user wants fast and structured information.
+
+## Addition:
+1. Create several files and helper functions as needed.
+2. Use the provided code snippets to build the app.
+3. I am not pushing you to generate all the files and codebase in one shot. You may ask follow up questions and generate rest of the codebase/ files/ functions for Gradio app.
+
+# API request examples:
+
+> model=`bagoodex/bagoodex-search-v1`.
+
+## 1. As a regular chat completion model (but searching on the internet):
+
+Get API Key from `.env` file:
+<code_snippet>
+```py
+import os
+from dotenv import load_dotenv
+load_dotenv()
+AIML_API_KEY = os.getenv('AIML_API_KEY')
+```
+</code_snippet>
+-----
+<code_snippet>
+```py
+import requests
+from openai import OpenAI
+
+# Insert your AIML API Key instead of <YOUR_API_KEY>:
+API_KEY = '<YOUR_API_KEY>'
+API_URL = 'https://api.aimlapi.com'
+
+# Call the standart chat completion endpoint to get an ID
+def complete_chat():
+    client = OpenAI(
+        base_url=API_URL,
+        api_key=API_KEY,
+    )    
+
+    response = client.chat.completions.create(
+        model="bagoodex/bagoodex-search-v1",
+        messages=[
+            {
+                "role": "user",
+                
+                # Enter your query here
+                "content": 'how to make a slingshot',
+            },
+        ],
+    )
+    
+    
+    print(response.choices[0].message.content)
+
+
+# Run the function
+complete_chat()
+```
+</code_snippet>
+
+### Model Response:
+
+<response>
+```
+To make a slingshot, you can follow the instructions provided in the two sources:
+
+**Option 1: Make a Giant Slingshot**
+
+* Start by cutting two 2x4's to a length of 40 inches each, which will be the main arms of the slingshot.
+* Attach the arms to a base made of plywood using screws, and then add side braces to support the arms.
+* Install an exercise band as the launching mechanism, making sure to tighten it to achieve the desired distance.
+* Add a cross brace to keep the arms rigid and prevent them from spreading or caving in.
+
+**Option 2: Make a Stick Slingshot**
+
+* Find a sturdy, Y-shaped stick and break it down to the desired shape.
+* Cut notches on the ends of the stick to hold the rubber bands in place.
+* Create a pouch by folding a piece of fabric in half and then half again, and then cutting small holes for the rubber bands.        
+* Thread the rubber bands through the holes and tie them securely to the stick using thread.
+* Decorate the slingshot with coloured yarn or twine if desired.
+
+You can choose to make either a giant slingshot or a stick slingshot, depending on your preference and the materials available.  
+```
+</response>
+
+----
+
+## 2. Using six specialized API endpoints, each designed to search for only one specific type of information:
+<use_cases>
+[1]. Links -> refer to [Find Links](#1-find-links)
+[2]. Images -> refer to [Find Images](#2-find-images)
+[3]. Videos -> refer to [Find Videos](#3-find-videos)
+[4]. Locations -> refer to [Find a Local Map](#4-find-a-local-map)
+[5]. Knowledge about a topic, structured as a small knowledge base -> refer to [Knowledge about a topic](#5-knowledge-about-a-topic-structured-as-a-small-knowledge-base)
+</use_cases>
+
+#### Advanced search syntax
+Note that queries can include advanced search syntax:
+<note>
+1. Search for an exact match: Enter a word or phrase using \" before and after it. 
+For example, \"tallest building\". 
+2. Search for a specific site: Enter site: in front of a site or domain. 
+For example, site:youtube.com cat videos.
+3. Exclude words from your search: Enter - in front of a word that you want to leave out.
+For example, jaguar speed -car.
+</note>
+
+----
+
+## 1. Find Links
+
+<important>
+First, you must first call the standard chat completion endpoint with your query.
+The chat completion endpoint returns an ID, which must then be passed as the sole input parameter followup_id to the bagoodex/links endpoint below.
+</important>
+
+### Example:
+<code_snippet>
+```py
+import requests
+from openai import OpenAI
+
+# Insert your AIML API Key instead of <YOUR_API_KEY>:
+API_KEY = '<YOUR_API_KEY>'
+API_URL = 'https://api.aimlapi.com'
+
+# Call the standart chat completion endpoint to get an ID
+def complete_chat():
+    client = OpenAI(
+        base_url=API_URL,
+        api_key=API_KEY,
+    )    
+
+    response = client.chat.completions.create(
+        model="bagoodex/bagoodex-search-v1",
+        messages=[
+            {
+                "role": "user",
+                "content": "site:www.reddit.com AI",
+            },
+        ],
+    )
+    
+    # Extract the ID from the response
+    gen_id = response.id  
+    print(f"Generated ID: {gen_id}")
+    
+    # Call the Bagoodex endpoint with the generated ID
+    get_links(gen_id)
+
+def get_links(gen_id):
+    params = {'followup_id': gen_id}
+    headers = {'Authorization': f'Bearer {API_KEY}'}
+    response = requests.get(f'{API_URL}/v1/bagoodex/links', headers=headers, params=params)
+    
+    print(response.json())
+
+# Run the function
+complete_chat()
+```
+</code_snippet>
+
+### Model Response:
+<response>
+```
+[
+  "https://www.reddit.com/r/artificial/",
+  "https://www.reddit.com/r/ArtificialInteligence/",
+  "https://www.reddit.com/r/artificial/wiki/getting-started/",
+  "https://www.reddit.com/r/ChatGPT/comments/1fwt2zf/it_is_officially_over_these_are_all_ai/",
+  "https://www.reddit.com/r/ArtificialInteligence/comments/1f8wxe7/whats_the_most_surprising_way_ai_has_become_part/",
+  "https://gist.github.com/nndda/a985daed53283a2c7fd399e11a185b11",
+  "https://www.reddit.com/r/aivideo/",
+  "https://www.reddit.com/r/singularity/",
+  "https://www.abc.net.au/",
+  "https://www.reddit.com/r/PromptEngineering/"
+]
+```
+</response>
+
+## 2. Find Images
+
+<important>
+First, you must first call the standard chat completion endpoint with your query.
+The chat completion endpoint returns an ID, which must then be passed as the sole input parameter followup_id to the bagoodex/images endpoint below.
+</important>
+
+### Example:
+<code_snippet>
+```py
+import requests
+from openai import OpenAI
+
+# Insert your AIML API Key instead of <YOUR_API_KEY>:
+API_KEY = '<YOUR_API_KEY>'
+API_URL = 'https://api.aimlapi.com'
+
+# Call the standart chat completion endpoint to get an ID
+def complete_chat():
+    client = OpenAI(
+        base_url=API_URL,
+        api_key=API_KEY,
+    )    
+
+    response = client.chat.completions.create(
+        model="bagoodex/bagoodex-search-v1",
+        messages=[
+            {
+                "role": "user",
+                "content": "giant dragonflies",
+            },
+        ],
+    )
+    
+    # Extract the ID from the response
+    gen_id = response.id  
+    print(f"Generated ID: {gen_id}")
+    
+    # Call the Bagoodex endpoint with the generated ID
+    get_images(gen_id)
+
+def get_images(gen_id):
+    params = {'followup_id': gen_id}
+    headers = {'Authorization': f'Bearer {API_KEY}'}
+    response = requests.get(f'{API_URL}/v1/bagoodex/images', headers=headers, params=params)
+    
+    print(response.json())
+
+# Run the function
+complete_chat()
+```
+</code_snippet>
+
+### Model Response:
+<response>
+```
+[
+  {
+    "source": "",
+    "original": "https://images.theconversation.com/files/234118/original/file-20180829-195319-1d4y13t.jpg?ixlib=rb-4.1.0&rect=0%2C7%2C1200%2C790&q=45&auto=format&w=926&fit=clip",
+    "title": "Paleozoic era's giant dragonflies ...",
+    "source_name": "The Conversation"
+  },
+  {
+    "source": "",
+    "original": "https://s3-us-west-1.amazonaws.com/scifindr/articles/image3s/000/002/727/large/meganeuropsis-eating-roach_lucas-lima_3x4.jpg?1470033295",
+    "title": "huge dragonfly ...",
+    "source_name": "Earth Archives"
+  },
+  {
+    "source": "",
+    "original": "https://s3-us-west-1.amazonaws.com/scifindr/articles/image2s/000/002/727/large/meganeuropsis_lucas-lima_4x3.jpg?1470033293",
+    "title": "huge dragonfly ...",
+    "source_name": "Earth Archives"
+  },
+  {
+    "source": "",
+    "original": "https://static.wikia.nocookie.net/prehistoricparkip/images/3/37/Meganeurid_bbc_prehistoric_.jpg/revision/latest?cb=20120906182204",
+    "title": "Giant Dragonfly | Prehistoric Park Wiki ...",
+    "source_name": "Prehistoric Park Wiki - Fandom"
+  },
+  {
+    "source": "",
+    "original": "https://i.redd.it/rig989kttmc71.jpg",
+    "title": "This pretty large dragonfly we found ...",
+    "source_name": "Reddit"
+  },
+  {
+    "source": "",
+    "original": "https://upload.wikimedia.org/wikipedia/commons/f/fc/Meganeurites_gracilipes_restoration.webp",
+    "title": "Meganisoptera - Wikipedia",
+    "source_name": "Wikipedia"
+  },
+  {
+    "source": "",
+    "original": "https://sites.wustl.edu/monh/files/2019/12/woman-and-meganeura-350x263.jpeg",
+    "title": "Dragonflies and Damselflies of Missouri ...",
+    "source_name": "Washington University"
+  },
+  {
+    "source": "",
+    "original": "http://www.stancsmith.com/uploads/4/8/9/6/48964465/meganeuropsis-giantdragonfly_orig.jpg",
+    "title": "Ginormous Dragonfly - Stan C ...",
+    "source_name": "Stan C. Smith"
+  },
+  {
+    "source": "",
+    "original": "https://static.sciencelearn.org.nz/images/images/000/004/172/original/INSECTS_ITV_Image_map_Aquatic_insects_Dragonfly.jpg?1674173331",
+    "title": "Bush giant dragonfly — Science ...",
+    "source_name": "Science Learning Hub"
+  },
+  {
+    "source": "",
+    "original": "https://i.ytimg.com/vi/ixlQX7lV8dc/sddefault.jpg",
+    "title": "Meganeura' - The Prehistoric Dragonfly ...",
+    "source_name": "YouTube"
+  }
+]
+```
+</response>
+
+## 3. Find Videos
+
+<important>
+First, you must first call the standard chat completion endpoint with your query.
+The chat completion endpoint returns an ID, which must then be passed as the sole input parameter followup_id to the bagoodex/videos endpoint below.
+</important>
+
+### Example:
+<code_snippet>
+```py
+import requests
+from openai import OpenAI
+
+# Insert your AIML API Key instead of <YOUR_API_KEY>:
+API_KEY = '<YOUR_API_KEY>'
+API_URL = 'https://api.aimlapi.com'
+
+# Call the standart chat completion endpoint to get an ID
+def complete_chat():
+    client = OpenAI(
+        base_url=API_URL,
+        api_key=API_KEY,
+    )    
+
+    response = client.chat.completions.create(
+        model="bagoodex/bagoodex-search-v1",
+        messages=[
+            {
+                "role": "user",
+                "content": "how to work with github",
+            },
+        ],
+    )
+    
+    # Extract the ID from the response
+    gen_id = response.id  
+    print(f"Generated ID: {gen_id}")
+    
+    # Call the Bagoodex endpoint with the generated ID
+    get_videos(gen_id)
+
+def get_videos(gen_id):
+    params = {'followup_id': gen_id}
+    headers = {'Authorization': f'Bearer {API_KEY}'}
+    response = requests.get(f'{API_URL}/v1/bagoodex/videos', headers=headers, params=params)
+    
+    print(response.json())
+
+# Run the function
+complete_chat()
+```
+
+### Model Response:
+
+<response>
+```
+[
+  {
+    "link": "https://www.youtube.com/watch?v=iv8rSLsi1xo",
+    "thumbnail": "https://dmwtgq8yidg0m.cloudfront.net/medium/_cYAcql_-g0w-video-thumb.jpeg",
+    "title": "GitHub Tutorial - Beginner's Training Guide"
+  },
+  {
+    "link": "https://www.youtube.com/watch?v=tRZGeaHPoaw",
+    "thumbnail": "https://dmwtgq8yidg0m.cloudfront.net/medium/-bforsTVDxRQ-video-thumb.jpeg",
+    "title": "Git and GitHub Tutorial for Beginners"
+  }
+]
+```
+</response>
+
+## 4. Find a Local Map
+
+<important>
+First, you must first call the standard chat completion endpoint with your query.
+The chat completion endpoint returns an ID, which must then be passed as the sole input parameter followup_id to the bagoodex/local-map endpoint below:
+</important>
+
+### Example:
+
+<code_snippet>
+```py
+import requests
+from openai import OpenAI
+
+# Insert your AIML API Key instead of <YOUR_API_KEY>:
+API_KEY = '<YOUR_API_KEY>'
+API_URL = 'https://api.aimlapi.com'
+
+# Call the standart chat completion endpoint to get an ID
+def complete_chat():
+    client = OpenAI(
+        base_url=API_URL,
+        api_key=API_KEY,
+    )    
+
+    response = client.chat.completions.create(
+        model="bagoodex/bagoodex-search-v1",
+        messages=[
+            {
+                "role": "user",
+                "content": "where is san francisco",
+            },
+        ],
+    )
+    
+    # Extract the ID from the response
+    gen_id = response.id  
+    print(f"Generated ID: {gen_id}")
+    
+    # Call the Bagoodex endpoint with the generated ID
+    get_local_map(gen_id)
+
+def get_local_map(gen_id):
+    params = {'followup_id': gen_id}
+    headers = {'Authorization': f'Bearer {API_KEY}'}
+    response = requests.get(f'{API_URL}/v1/bagoodex/local-map', headers=headers, params=params)
+    
+    print(response.json())
+
+# Run the function
+complete_chat()
+```
+</code_snippet>
+
+### Model Response:
+
+<response>
+```
+{
+  "link": "https://www.google.com/maps/place/San+Francisco,+CA/data=!4m2!3m1!1s0x80859a6d00690021:0x4a501367f076adff?sa=X&ved=2ahUKEwjqg7eNz9KLAxVCFFkFHWSPEeIQ8gF6BAgqEAA&hl=en",
+  "image": "https://dmwtgq8yidg0m.cloudfront.net/images/TdNFUpcEvvHL-local-map.webp"
+}
+```
+</response>
+
+## 5. Knowledge about a topic, structured as a small knowledge base
+
+<important>
+First, you must first call the standard chat completion endpoint with your query.
+The chat completion endpoint returns an ID, which must then be passed as the sole input parameter followup_id to the bagoodex/knowledge endpoint below.
+</important>
+
+### Example:
+
+<code_snippet>
+```py
+import requests
+from openai import OpenAI
+
+# Insert your AIML API Key instead of <YOUR_API_KEY>:
+API_KEY = '<YOUR_API_KEY>'
+API_URL = 'https://api.aimlapi.com'
+
+# Call the standart chat completion endpoint to get an ID
+def complete_chat():
+    client = OpenAI(
+        base_url=API_URL,
+        api_key=API_KEY,
+    )    
+
+    response = client.chat.completions.create(
+        model="bagoodex/bagoodex-search-v1",
+        messages=[
+            {
+                "role": "user",
+                "content": "Who is Nicola Tesla",
+            },
+        ],
+    )
+    
+    # Extract the ID from the response
+    gen_id = response.id  
+    print(f"Generated ID: {gen_id}")
+    
+    # Call the Bagoodex endpoint with the generated ID
+    get_knowledge(gen_id)
+
+def get_knowledge(gen_id):
+    params = {'followup_id': gen_id}
+    headers = {'Authorization': f'Bearer {API_KEY}'}
+    
+    response = requests.get(f'{API_URL}/v1/bagoodex/knowledge', headers=headers, params=params)
+    print(response.json())
+
+# Run the function
+complete_chat()
+```
+</code_snippet>
+
+### Model Response:
+
+<response>
+```
+{
+  'title': 'Nikola Tesla', 
+  'type': 'Engineer and futurist', 
+  'description': None, 
+  'born': 'July 10, 1856, Smiljan, Croatia', 
+  'died': 'January 7, 1943 (age 86 years), The New Yorker A Wyndham Hotel, New York, NY'
+}
+```
+</response>
+
+
+[follow_up]:
+
+Great! 
+Of course. This initial UI layout meet my expectations for the first step.
+Please proceed with other steps as mentioned in the step-by-step guide above.
+
+[follow_up]:
+
+Great! But we need few changes.
+0. You forgot submit button. Stretch the UI (chat interface) full height. [always refer to "https://www.gradio.app/guides/creating-a-chatbot-fast" and follow up tutorials].
+1. Place Local Map Search and Knowledge Base above input in as a little buttons. They serve as an additional functionality for user query. If user selects one or both of them we should send additional API calls (maybe asynchronous) and return the results. Note that Local Map Search returns Google map url. We should render it instantly in place in the Gradio app. It would be great If we could render inside chat message big field.
+2. Seems you forgot Helper Functions and Classes for responses as we know they are static already. To display all the images as a Gallery on click Search Images. and on click we should expand image. ( refer to earlier message for more information and requirements and guidance ).
+3. Same applies to Search Videos, we should render them and on Click play instantly in place (NO redirect to YouTube). [( refer to earlier message for more information and requirements and guidance )].
+4. and Search Links we should render them accordingly: title then citation. For example: how_to_build_a_sling_at_home_thats_not_shit [here place link to redirect the user]. [( refer to earlier message for more information and requirements and guidance )].
+
+[Search Images]:
+<response>
+[{'source': '', 'original': 'https://i.ytimg.com/vi/iYlJirFtYaA/sddefault.jpg', 'title': 'How to make a Slingshot using Pencils ...', 'source_name': 'YouTube'}, {'source': '', 'original': 'https://i.ytimg.com/vi/HWSkVaptzRA/maxresdefault.jpg', 'title': 'How to make a Slingshot at Home - YouTube', 'source_name': 'YouTube'}, {'source': '', 'original': 'https://content.instructables.com/FHB/VGF8/FHXUOJKJ/FHBVGF8FHXUOJKJ.jpg?auto=webp', 'title': 'Country Boy" Style Slingshot ...', 'source_name': 'Instructables'}, {'source': '', 'original': 'https://i.ytimg.com/vi/6wXqlJVw03U/maxresdefault.jpg', 'title': 'Make slingshot using popsicle stick ...', 'source_name': 'YouTube'}, {'source': '', 'original': 'https://ds-tc.prod.pbskids.org/designsquad/diy/DESIGN-SQUAD-42.jpg', 'title': 'Build | Indoor Slingshot . DESIGN SQUAD ...', 'source_name': 'PBS KIDS'}, {'source': '', 'original': 'https://i.ytimg.com/vi/wCxFkPLuNyA/maxresdefault.jpg', 'title': 'Paper Ninja Weapons ...', 'source_name': 'YouTube'}, {'source': '', 'original': 'https://i0.wp.com/makezine.com/wp-content/uploads/2015/01/slingshot1.jpg?fit=800%2C600&ssl=1', 'title': 'Rotating Bearings ...', 'source_name': 'Make Magazine'}, {'source': '', 'original': 'https://makeandtakes.com/wp-content/uploads/IMG_1144-1.jpg', 'title': 'Make a DIY Stick Slingshot Kids Craft', 'source_name': 'Make and Takes'}, {'source': '', 'original': 'https://i.ytimg.com/vi/X9oWGuKypuY/maxresdefault.jpg', 'title': 'Easy Home Made Slingshot - YouTube', 'source_name': 'YouTube'}, {'source': '', 'original': 'https://www.wikihow.com/images/thumb/4/41/Make-a-Sling-Shot-Step-7-Version-5.jpg/550px-nowatermark-Make-a-Sling-Shot-Step-7-Version-5.jpg', 'title': 'How to Make a Sling Shot: 15 Steps ...', 'source_name': 'wikiHow'}]
+</response>
+
+[Search Videos]:
+<response>
+Videos:
+[{'link': 'https://www.youtube.com/watch?v=X9oWGuKypuY', 'thumbnail': 'https://dmwtgq8yidg0m.cloudfront.net/medium/d3G6HeC5BO93-video-thumb.jpeg', 'title': 'Easy Home Made Slingshot'}, {'link': 'https://www.youtube.com/watch?v=V2iZF8oAXHo&pp=ygUMI2d1bGVsaGFuZGxl', 'thumbnail': 'https://dmwtgq8yidg0m.cloudfront.net/medium/sb2Iw9Ug-Pne-video-thumb.jpeg', 'title': 'Making an Apple Wood Slingshot | Woodcraft'}]
+</response>
+
+[Links]:
+<response>
+['https://www.reddit.com/r/slingshots/comments/1d50p3e/how_to_build_a_sling_at_home_thats_not_shit/', 'https://www.instructables.com/Make-a-Giant-Slingshot/', 'https://www.mudandbloom.com/blog/stick-slingshot', 'https://pbskids.org/designsquad/build/indoor-slingshot/', 'https://www.instructables.com/How-to-Make-a-Slingshot-2/']
+</response>
+
+### Local Map Response:
+
+<response>
+{
+  "link": "https://www.google.com/maps/place/San+Francisco,+CA/data=!4m2!3m1!1s0x80859a6d00690021:0x4a501367f076adff?sa=X&ved=2ahUKEwjqg7eNz9KLAxVCFFkFHWSPEeIQ8gF6BAgqEAA&hl=en",
+  "image": "https://dmwtgq8yidg0m.cloudfront.net/images/TdNFUpcEvvHL-local-map.webp"
+}
+
+</response>
+
+
+[follow_up]:
+
+Great! Everything working really good!!
+1. Now let's reprodice using Gradios own specific components for Chat bots and AI applications.
+2. We can also simple replace all the helper function that used html and css to Gradio components.
+
+Here's guide i just scraped from their website:
+<start_of_guide>
+How to Create a Chatbot with Gradio
+Introduction
+Chatbots are a popular application of large language models (LLMs). Using Gradio, you can easily build a chat application and share that with your users, or try it yourself using an intuitive UI.
+
+This tutorial uses gr.ChatInterface(), which is a high-level abstraction that allows you to create your chatbot UI fast, often with a few lines of Python. It can be easily adapted to support multimodal chatbots, or chatbots that require further customization.
+
+Prerequisites: please make sure you are using the latest version of Gradio:
+
+$ pip install --upgrade gradio
+Note for OpenAI-API compatible endpoints
+If you have a chat server serving an OpenAI-API compatible endpoint (such as Ollama), you can spin up a ChatInterface in a single line of Python. First, also run pip install openai. Then, with your own URL, model, and optional token:
+
+import gradio as gr
+
+gr.load_chat("http://localhost:11434/v1/", model="llama3.2", token="***").launch()
+Read about gr.load_chat in the docs. If you have your own model, keep reading to see how to create an application around any chat model in Python!
+
+Defining a chat function
+To create a chat application with gr.ChatInterface(), the first thing you should do is define your chat function. In the simplest case, your chat function should accept two arguments: message and history (the arguments can be named anything, but must be in this order).
+
+message: a str representing the user's most recent message.
+history: a list of openai-style dictionaries with role and content keys, representing the previous conversation history. May also include additional keys representing message metadata.
+For example, the history could look like this:
+
+[
+    {"role": "user", "content": "What is the capital of France?"},
+    {"role": "assistant", "content": "Paris"}
+]
+while the next message would be:
+
+"And what is its largest city?"
+Your chat function simply needs to return:
+
+a str value, which is the chatbot's response based on the chat history and most recent message, for example, in this case:
+Paris is also the largest city.
+Let's take a look at a few example chat functions:
+
+Example: a chatbot that randomly responds with yes or no
+
+Let's write a chat function that responds Yes or No randomly.
+
+Here's our chat function:
+
+import random
+
+def random_response(message, history):
+    return random.choice(["Yes", "No"])
+Now, we can plug this into gr.ChatInterface() and call the .launch() method to create the web interface:
+
+import gradio as gr
+
+gr.ChatInterface(
+    fn=random_response, 
+    type="messages"
+).launch()
+Tip:
+ Always set type="messages" in gr.ChatInterface. The default value (type="tuples") is deprecated and will be removed in a future version of Gradio.
+
+That's it! Here's our running demo, try it out:
+
+Chatbot
+Message
+Type a message...
+
+gradio/chatinterface_random_response
+built with Gradio.
+Hosted on Hugging Face Space Spaces
+
+Example: a chatbot that alternates between agreeing and disagreeing
+
+Of course, the previous example was very simplistic, it didn't take user input or the previous history into account! Here's another simple example showing how to incorporate a user's input as well as the history.
+
+import gradio as gr
+
+def alternatingly_agree(message, history):
+    if len([h for h in history if h['role'] == "assistant"]) % 2 == 0:
+        return f"Yes, I do think that: {message}"
+    else:
+        return "I don't think so"
+
+gr.ChatInterface(
+    fn=alternatingly_agree, 
+    type="messages"
+).launch()
+We'll look at more realistic examples of chat functions in our next Guide, which shows examples of using gr.ChatInterface with popular LLMs.
+
+Streaming chatbots
+In your chat function, you can use yield to generate a sequence of partial responses, each replacing the previous ones. This way, you'll end up with a streaming chatbot. It's that simple!
+
+import time
+import gradio as gr
+
+def slow_echo(message, history):
+    for i in range(len(message)):
+        time.sleep(0.3)
+        yield "You typed: " + message[: i+1]
+
+gr.ChatInterface(
+    fn=slow_echo, 
+    type="messages"
+).launch()
+While the response is streaming, the "Submit" button turns into a "Stop" button that can be used to stop the generator function.
+
+Tip:
+ Even though you are yielding the latest message at each iteration, Gradio only sends the "diff" of each message from the server to the frontend, which reduces latency and data consumption over your network.
+
+Customizing the Chat UI
+If you're familiar with Gradio's gr.Interface class, the gr.ChatInterface includes many of the same arguments that you can use to customize the look and feel of your Chatbot. For example, you can:
+
+add a title and description above your chatbot using title and description arguments.
+add a theme or custom css using theme and css arguments respectively.
+add examples and even enable cache_examples, which make your Chatbot easier for users to try it out.
+customize the chatbot (e.g. to change the height or add a placeholder) or textbox (e.g. to add a max number of characters or add a placeholder).
+Adding examples
+
+You can add preset examples to your gr.ChatInterface with the examples parameter, which takes a list of string examples. Any examples will appear as "buttons" within the Chatbot before any messages are sent. If you'd like to include images or other files as part of your examples, you can do so by using this dictionary format for each example instead of a string: {"text": "What's in this image?", "files": ["cheetah.jpg"]}. Each file will be a separate message that is added to your Chatbot history.
+
+You can change the displayed text for each example by using the example_labels argument. You can add icons to each example as well using the example_icons argument. Both of these arguments take a list of strings, which should be the same length as the examples list.
+
+If you'd like to cache the examples so that they are pre-computed and the results appear instantly, set cache_examples=True.
+
+Customizing the chatbot or textbox component
+
+If you want to customize the gr.Chatbot or gr.Textbox that compose the ChatInterface, then you can pass in your own chatbot or textbox components. Here's an example of how we to apply the parameters we've discussed in this section:
+
+import gradio as gr
+
+def yes_man(message, history):
+    if message.endswith("?"):
+        return "Yes"
+    else:
+        return "Ask me anything!"
+
+gr.ChatInterface(
+    yes_man,
+    type="messages",
+    chatbot=gr.Chatbot(height=300),
+    textbox=gr.Textbox(placeholder="Ask me a yes or no question", container=False, scale=7),
+    title="Yes Man",
+    description="Ask Yes Man any question",
+    theme="ocean",
+    examples=["Hello", "Am I cool?", "Are tomatoes vegetables?"],
+    cache_examples=True,
+).launch()
+Here's another example that adds a "placeholder" for your chat interface, which appears before the user has started chatting. The placeholder argument of gr.Chatbot accepts Markdown or HTML:
+
+gr.ChatInterface(
+    yes_man,
+    type="messages",
+    chatbot=gr.Chatbot(placeholder="<strong>Your Personal Yes-Man</strong><br>Ask Me Anything"),
+...
+The placeholder appears vertically and horizontally centered in the chatbot.
+
+Multimodal Chat Interface
+You may want to add multimodal capabilities to your chat interface. For example, you may want users to be able to upload images or files to your chatbot and ask questions about them. You can make your chatbot "multimodal" by passing in a single parameter (multimodal=True) to the gr.ChatInterface class.
+
+When multimodal=True, the signature of your chat function changes slightly: the first parameter of your function (what we referred to as message above) should accept a dictionary consisting of the submitted text and uploaded files that looks like this:
+
+{
+    "text": "user input", 
+    "files": [
+        "updated_file_1_path.ext",
+        "updated_file_2_path.ext", 
+        ...
+    ]
+}
+This second parameter of your chat function, history, will be in the same openai-style dictionary format as before. However, if the history contains uploaded files, the content key for a file will be not a string, but rather a single-element tuple consisting of the filepath. Each file will be a separate message in the history. So after uploading two files and asking a question, your history might look like this:
+
+[
+    {"role": "user", "content": ("cat1.png")},
+    {"role": "user", "content": ("cat2.png")},
+    {"role": "user", "content": "What's the difference between these two images?"},
+]
+The return type of your chat function does not change when setting multimodal=True (i.e. in the simplest case, you should still return a string value). We discuss more complex cases, e.g. returning files below.
+
+If you are customizing a multimodal chat interface, you should pass in an instance of gr.MultimodalTextbox to the textbox parameter. You can customize the MultimodalTextbox further by passing in the sources parameter, which is a list of sources to enable. Here's an example that illustrates how to set up and customize and multimodal chat interface:
+
+import gradio as gr
+
+def count_images(message, history):
+    num_images = len(message["files"])
+    total_images = 0
+    for message in history:
+        if isinstance(message["content"], tuple):
+            total_images += 1
+    return f"You just uploaded {num_images} images, total uploaded: {total_images+num_images}"
+
+demo = gr.ChatInterface(
+    fn=count_images, 
+    type="messages", 
+    examples=[
+        {"text": "No files", "files": []}
+    ], 
+    multimodal=True,
+    textbox=gr.MultimodalTextbox(file_count="multiple", file_types=["image"], sources=["upload", "microphone"])
+)
+
+demo.launch()
+Additional Inputs
+You may want to add additional inputs to your chat function and expose them to your users through the chat UI. For example, you could add a textbox for a system prompt, or a slider that sets the number of tokens in the chatbot's response. The gr.ChatInterface class supports an additional_inputs parameter which can be used to add additional input components.
+
+The additional_inputs parameters accepts a component or a list of components. You can pass the component instances directly, or use their string shortcuts (e.g. "textbox" instead of gr.Textbox()). If you pass in component instances, and they have not already been rendered, then the components will appear underneath the chatbot within a gr.Accordion().
+
+Here's a complete example:
+
+import gradio as gr
+import time
+
+def echo(message, history, system_prompt, tokens):
+    response = f"System prompt: {system_prompt}\n Message: {message}."
+    for i in range(min(len(response), int(tokens))):
+        time.sleep(0.05)
+        yield response[: i + 1]
+
+demo = gr.ChatInterface(
+    echo,
+    type="messages",
+    additional_inputs=[
+        gr.Textbox("You are helpful AI.", label="System Prompt"),
+        gr.Slider(10, 100),
+    ],
+)
+
+demo.launch()
+If the components you pass into the additional_inputs have already been rendered in a parent gr.Blocks(), then they will not be re-rendered in the accordion. This provides flexibility in deciding where to lay out the input components. In the example below, we position the gr.Textbox() on top of the Chatbot UI, while keeping the slider underneath.
+
+import gradio as gr
+import time
+
+def echo(message, history, system_prompt, tokens):
+    response = f"System prompt: {system_prompt}\n Message: {message}."
+    for i in range(min(len(response), int(tokens))):
+        time.sleep(0.05)
+        yield response[: i+1]
+
+with gr.Blocks() as demo:
+    system_prompt = gr.Textbox("You are helpful AI.", label="System Prompt")
+    slider = gr.Slider(10, 100, render=False)
+
+    gr.ChatInterface(
+        echo, additional_inputs=[system_prompt, slider], type="messages"
+    )
+
+demo.launch()
+Examples with additional inputs
+
+You can also add example values for your additional inputs. Pass in a list of lists to the examples parameter, where each inner list represents one sample, and each inner list should be 1 + len(additional_inputs) long. The first element in the inner list should be the example value for the chat message, and each subsequent element should be an example value for one of the additional inputs, in order. When additional inputs are provided, examples are rendered in a table underneath the chat interface.
+
+If you need to create something even more custom, then its best to construct the chatbot UI using the low-level gr.Blocks() API. We have a dedicated guide for that here.
+
+Additional Outputs
+In the same way that you can accept additional inputs into your chat function, you can also return additional outputs. Simply pass in a list of components to the additional_outputs parameter in gr.ChatInterface and return additional values for each component from your chat function. Here's an example that extracts code and outputs it into a separate gr.Code component:
+
+import gradio as gr
+
+python_code = """
+def fib(n):
+    if n <= 0:
+        return 0
+    elif n == 1:
+        return 1
+    else:
+        return fib(n-1) + fib(n-2)
+"""
+
+js_code = """
+function fib(n) {
+    if (n <= 0) return 0;
+    if (n === 1) return 1;
+    return fib(n - 1) + fib(n - 2);
+}
+"""
+
+def chat(message, history):
+    if "python" in message.lower():
+        return "Type Python or JavaScript to see the code.", gr.Code(language="python", value=python_code)
+    elif "javascript" in message.lower():
+        return "Type Python or JavaScript to see the code.", gr.Code(language="javascript", value=js_code)
+    else:
+        return "Please ask about Python or JavaScript.", None
+
+with gr.Blocks() as demo:
+    code = gr.Code(render=False)
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("<center><h1>Write Python or JavaScript</h1></center>")
+            gr.ChatInterface(
+                chat,
+                examples=["Python", "JavaScript"],
+                additional_outputs=[code],
+                type="messages"
+            )
+        with gr.Column():
+            gr.Markdown("<center><h1>Code Artifacts</h1></center>")
+            code.render()
+
+demo.launch()
+Note: unlike the case of additional inputs, the components passed in additional_outputs must be already defined in your gr.Blocks context -- they are not rendered automatically. If you need to render them after your gr.ChatInterface, you can set render=False when they are first defined and then .render() them in the appropriate section of your gr.Blocks() as we do in the example above.
+
+Returning Complex Responses
+We mentioned earlier that in the simplest case, your chat function should return a str response, which will be rendered as Markdown in the chatbot. However, you can also return more complex responses as we discuss below:
+
+Returning files or Gradio components
+
+Currently, the following Gradio components can be displayed inside the chat interface:
+
+gr.Image
+gr.Plot
+gr.Audio
+gr.HTML
+gr.Video
+gr.Gallery
+gr.File
+Simply return one of these components from your function to use it with gr.ChatInterface. Here's an example that returns an audio file:
+
+import gradio as gr
+
+def music(message, history):
+    if message.strip():
+        return gr.Audio("https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav")
+    else:
+        return "Please provide the name of an artist"
+
+gr.ChatInterface(
+    music,
+    type="messages",
+    textbox=gr.Textbox(placeholder="Which artist's music do you want to listen to?", scale=7),
+).launch()
+Similarly, you could return image files with gr.Image, video files with gr.Video, or arbitrary files with the gr.File component.
+
+Returning Multiple Messages
+
+You can return multiple assistant messages from your chat function simply by returning a list of messages, each of which is a valid chat type. This lets you, for example, send a message along with files, as in the following example:
+
+import gradio as gr
+
+def echo_multimodal(message, history):
+    response = []
+    response.append("You wrote: '" + message["text"] + "' and uploaded:")
+    if message.get("files"):
+        for file in message["files"]:
+            response.append(gr.File(value=file))
+    return response
+
+demo = gr.ChatInterface(
+    echo_multimodal,
+    type="messages",
+    multimodal=True,
+    textbox=gr.MultimodalTextbox(file_count="multiple"),
+)
+
+demo.launch()
+Displaying intermediate thoughts or tool usage
+
+The gr.ChatInterface class supports displaying intermediate thoughts or tool usage direct in the chatbot.
+
+
+
+To do this, you will need to return a gr.ChatMessage object from your chat function. Here is the schema of the gr.ChatMessage data class as well as two internal typed dictionaries:
+
+@dataclass
+class ChatMessage:
+   content: str | Component
+   metadata: MetadataDict = None
+   options: list[OptionDict] = None
+
+class MetadataDict(TypedDict):
+   title: NotRequired[str]
+   id: NotRequired[int | str]
+   parent_id: NotRequired[int | str]
+   log: NotRequired[str]
+   duration: NotRequired[float]
+   status: NotRequired[Literal["pending", "done"]]
+
+class OptionDict(TypedDict):
+   label: NotRequired[str]
+   value: str
+As you can see, the gr.ChatMessage dataclass is similar to the openai-style message format, e.g. it has a "content" key that refers to the chat message content. But it also includes a "metadata" key whose value is a dictionary. If this dictionary includes a "title" key, the resulting message is displayed as an intermediate thought with the title being displayed on top of the thought. Here's an example showing the usage:
+
+import gradio as gr
+from gradio import ChatMessage
+import time
+
+sleep_time = 0.5
+
+def simulate_thinking_chat(message, history):
+    start_time = time.time()
+    response = ChatMessage(
+        content="",
+        metadata={"title": "_Thinking_ step-by-step", "id": 0, "status": "pending"}
+    )
+    yield response
+
+    thoughts = [
+        "First, I need to understand the core aspects of the query...",
+        "Now, considering the broader context and implications...",
+        "Analyzing potential approaches to formulate a comprehensive answer...",
+        "Finally, structuring the response for clarity and completeness..."
+    ]
+
+    accumulated_thoughts = ""
+    for thought in thoughts:
+        time.sleep(sleep_time)
+        accumulated_thoughts += f"- {thought}\n\n"
+        response.content = accumulated_thoughts.strip()
+        yield response
+
+    response.metadata["status"] = "done"
+    response.metadata["duration"] = time.time() - start_time
+    yield response
+
+    response = [
+        response,
+        ChatMessage(
+            content="Based on my thoughts and analysis above, my response is: This dummy repro shows how thoughts of a thinking LLM can be progressively shown before providing its final answer."
+        )
+    ]
+    yield response
+
+
+demo = gr.ChatInterface(
+    simulate_thinking_chat,
+    title="Thinking LLM Chat Interface 🤔",
+    type="messages",
+)
+
+demo.launch()
+You can even show nested thoughts, which is useful for agent demos in which one tool may call other tools. To display nested thoughts, include "id" and "parent_id" keys in the "metadata" dictionary. Read our dedicated guide on displaying intermediate thoughts and tool usage for more realistic examples.
+
+Providing preset responses
+
+When returning an assistant message, you may want to provide preset options that a user can choose in response. To do this, again, you will again return a gr.ChatMessage instance from your chat function. This time, make sure to set the options key specifying the preset responses.
+
+As shown in the schema for gr.ChatMessage above, the value corresponding to the options key should be a list of dictionaries, each with a value (a string that is the value that should be sent to the chat function when this response is clicked) and an optional label (if provided, is the text displayed as the preset response instead of the value).
+
+This example illustrates how to use preset responses:
+
+import gradio as gr
+import random
+
+example_code = """
+Here's an example Python lambda function:
+
+lambda x: x + {}
+
+Is this correct?
+"""
+
+def chat(message, history):
+    if message == "Yes, that's correct.":
+        return "Great!"
+    else:
+        return gr.ChatMessage(
+            content=example_code.format(random.randint(1, 100)),
+            options=[
+                {"value": "Yes, that's correct.", "label": "Yes"},
+                {"value": "No"}
+            ]
+        )
+
+demo = gr.ChatInterface(
+    chat,
+    type="messages",
+    examples=["Write an example Python lambda function."]
+)
+
+demo.launch()
+Modifying the Chatbot Value Directly
+You may wish to modify the value of the chatbot with your own events, other than those prebuilt in the gr.ChatInterface. For example, you could create a dropdown that prefills the chat history with certain conversations or add a separate button to clear the conversation history. The gr.ChatInterface supports these events, but you need to use the gr.ChatInterface.chatbot_value as the input or output component in such events. In this example, we use a gr.Radio component to prefill the the chatbot with certain conversations:
+
+import gradio as gr
+import random
+
+def prefill_chatbot(choice):
+    if choice == "Greeting":
+        return [
+            {"role": "user", "content": "Hi there!"},
+            {"role": "assistant", "content": "Hello! How can I assist you today?"}
+        ]
+    elif choice == "Complaint":
+        return [
+            {"role": "user", "content": "I'm not happy with the service."},
+            {"role": "assistant", "content": "I'm sorry to hear that. Can you please tell me more about the issue?"}
+        ]
+    else:
+        return []
+
+def random_response(message, history):
+    return random.choice(["Yes", "No"])
+
+with gr.Blocks() as demo:
+    radio = gr.Radio(["Greeting", "Complaint", "Blank"])
+    chat = gr.ChatInterface(random_response, type="messages")
+    radio.change(prefill_chatbot, radio, chat.chatbot_value)
+
+demo.launch()
+Using Your Chatbot via API
+Once you've built your Gradio chat interface and are hosting it on Hugging Face Spaces or somewhere else, then you can query it with a simple API at the /chat endpoint. The endpoint just expects the user's message and will return the response, internally keeping track of the message history.
+
+
+
+To use the endpoint, you should use either the Gradio Python Client or the Gradio JS client. Or, you can deploy your Chat Interface to other platforms, such as a:
+
+Discord bot [tutorial]
+Slack bot [tutorial]
+Website widget [tutorial]
+Chat History
+You can enable persistent chat history for your ChatInterface, allowing users to maintain multiple conversations and easily switch between them. When enabled, conversations are stored locally and privately in the user's browser using local storage. So if you deploy a ChatInterface e.g. on Hugging Face Spaces, each user will have their own separate chat history that won't interfere with other users' conversations. This means multiple users can interact with the same ChatInterface simultaneously while maintaining their own private conversation histories.
+
+To enable this feature, simply set gr.ChatInterface(save_history=True) (as shown in the example in the next section). Users will then see their previous conversations in a side panel and can continue any previous chat or start a new one.
+
+Collecting User Feedback
+To gather feedback on your chat model, set gr.ChatInterface(flagging_mode="manual") and users will be able to thumbs-up or thumbs-down assistant responses. Each flagged response, along with the entire chat history, will get saved in a CSV file in the app working directory (this can be configured via the flagging_dir parameter).
+
+You can also change the feedback options via flagging_options parameter. The default options are "Like" and "Dislike", which appear as the thumbs-up and thumbs-down icons. Any other options appear under a dedicated flag icon. This example shows a ChatInterface that has both chat history (mentioned in the previous section) and user feedback enabled:
+
+import time
+import gradio as gr
+
+def slow_echo(message, history):
+    for i in range(len(message)):
+        time.sleep(0.05)
+        yield "You typed: " + message[: i + 1]
+
+demo = gr.ChatInterface(
+    slow_echo,
+    type="messages",
+    flagging_mode="manual",
+    flagging_options=["Like", "Spam", "Inappropriate", "Other"],
+    save_history=True,
+)
+
+demo.launch()
+Note that in this example, we set several flagging options: "Like", "Spam", "Inappropriate", "Other". Because the case-sensitive string "Like" is one of the flagging options, the user will see a thumbs-up icon next to each assistant message. The three other flagging options will appear in a dropdown under the flag icon.
+
+What's Next?
+Now that you've learned about the gr.ChatInterface class and how it can be used to create chatbot UIs quickly, we recommend reading one of the following:
+
+Our next Guide shows examples of how to use gr.ChatInterface with popular LLM libraries.
+If you'd like to build very custom chat applications from scratch, you can build them using the low-level Blocks API, as discussed in this Guide.
+Once you've deployed your Gradio Chat Interface, its easy to use it other applications because of the built-in API. Here's a tutorial on how to deploy a Gradio chat interface as a Discord bot.
+<end_of_guide>
+
+[follow_up]:
+
+No make sure to keep the same UI as before in two columns. Place Knowledge Base and Local Map above grade chatinterface input and make them checkbox. when they checked we will do additional async request to the corresponding API. and display one by one separated messages in side chat interface. on the right side leave the Search Images, Videos, and Links.
+
+[follow_up]:
+
+<example_return_response>
+If you're planning to visit Paris, there are several options to consider for a 2-week trip.
+
+You can start by exploring the surrounding areas of Paris, such as Versailles and Giverny, Monet's Garden, which are easily accessible by public transportation.
+
+Another option is to visit the Loire Valley, which is known for its beautiful chateaux, such as Chambord, Chenonceau, and Tours. However, renting a car from Paris might be challenging without a driver's license, and the cost of an automatic rental might be out of your budget.
+
+Normandy is another region worth considering, with its D-day beaches, Bayeux tapestry, and Mont St Michel. However, this region is also best explored by car, and past reviews of local tours have been disappointing.
+
+Alsace is a beautiful region with the city of Strasbourg, which is highly recommended. However, it might be a bit out of the way, and a 1-2 day trip might not be enough to fully experience the region.
+
+Provence is another option, with its charming cities like Montpellier, Marseille, Nice, and St Tropex. However, this region is also best explored by car, and it might be more enjoyable if you're on a honeymoon or have more time to stay around the sea.
+
+To get a better idea of the best combination of cities and regions to visit with Paris, you can check out the following resources:
+
+https://www.fodors.com/community/europe/pls-suggest-combination-of-paris-and-which-other-cities-regions-for-2-week-trip-592935/
+https://www.fodors.com/community/europe/pls-suggest-combination-of-paris-and-which-other-cities-regions-for-2-week-trip-592935/#post15592935
+https://www.fodors.com/community/europe/pls-suggest-combination-of-paris-and-which-other-cities-regions-for-2-week-trip-592935/#post15592935
+
+</example_return_response>
+
+
+[follow_up]:
+
+
+
+
+
+[follow_up]:
+
+1. Update and Refactor codebase of the following Gradio App. 
+2. Use helpers from `helpers.py`. (e.g., embed_video, embed_image, format_links, embed_google_map, format_knowledge, and )
+3. Implement follow up questions to be displayed after each conversation below input field. on click any of them: question should be added to the ChatInterface conversation. 3.1. Send request to `chat_function`.
+4. List follow up questions instantly after getting response from `def chat_function // client.complete_chat(message) //`.
+5. if there is any issues onClick local map. Then we should send request to `get_places`.
+6. We are not pushing you to append `local map` and `knowledge base` response to the ChatInterface. You are all free to display them separately as we are displaying the `Search Images` and `Search Videos` in different cards interfaces.
+
+####### Gradio App ####### 
+[app.py]:
+<code_snippet>
+import os
+import requests
+import gradio as gr
+from bagoodex_client import BagoodexClient
+from r_types import ChatMessage
+from prompts import SYSTEM_PROMPT_FOLLOWUP, SYSTEM_PROMPT_MAP, SYSTEM_PROMPT_BASE
+from helpers import format_followup_questions
+
+client = BagoodexClient()
+
+def format_knowledge(result):
+    title = result.get('title', 'Unknown')
+    type_ = result.get('type', '')
+    born = result.get('born', '')
+    died = result.get('died', '')
+    content = f"""
+    **{title}**  
+    Type: {type_}  
+    Born: {born}  
+    Died: {died}
+    """
+    return gr.Markdown(content)
+
+def format_images(result):
+    urls = [item.get("original", "") for item in result]
+    return urls
+
+# Helper formatting functions
+def format_videos(result):
+    return [vid.get('link', '') for vid in result]
+
+# Advanced search functions
+def perform_video_search(followup_id):
+    if not followup_id:
+        return []
+    result = client.get_videos(followup_id)
+    return format_videos(result)
+
+def format_links(result):
+    links_md = "**Links:**\n"
+    for url in result:
+        title = url.rstrip('/').split('/')[-1]
+        links_md += f"- [{title}]({url})\n"
+    return gr.Markdown(links_md)
+
+# Define the chat function
+def chat_function(message, history, followup_id):
+    followup_id_new, answer = client.complete_chat(message)
+    return answer, followup_id_new
+
+def format_local_map(result):
+    link = result.get('link', '')
+    image_url = result.get('image', '')
+    html = f"""
+    <div>
+        <strong>Local Map:</strong><br>
+        <a href='{link}' target='_blank'>View on Google Maps</a><br>
+        <img src='{image_url}' style='width:100%;'/>
+    </div>
+    """
+    return gr.HTML(html)
+
+def append_local_map(followup_id, chatbot_value):
+    if not followup_id:
+        return chatbot_value
+    result = client.get_local_map(followup_id)
+    formatted = format_local_map(result)
+    new_message = {"role": "assistant", "content": formatted}
+    return chatbot_value + [new_message]
+
+def append_knowledge(followup_id, chatbot_value):
+    if not followup_id:
+        return chatbot_value
+    result = client.get_knowledge(followup_id)
+    formatted = format_knowledge(result)
+    new_message = {"role": "assistant", "content": formatted}
+    return chatbot_value + [new_message]
+
+# Define advanced search functions
+def perform_image_search(followup_id):
+    if not followup_id:
+        return []
+    result = client.get_images(followup_id)
+    urls = format_images(result)
+    return urls
+
+def perform_links_search(followup_id):
+    if not followup_id:
+        return gr.Markdown("No followup ID available.")
+    result = client.get_links(followup_id)
+    return format_links(result)
+
+# Custom CSS
+css = """
+#chatbot {
+    height: 100%;
+}
+"""
+
+
+def list_followup_questions(followup_id):
+    if not followup_id:
+        return gr.Markdown("No followup ID available.")
+    result = client.base_qna(messages=chat, system_prompt=SYSTEM_PROMPT_FOLLOWUP)
+    return format_followup_questions(result)
+
+def get_places(followup_id):
+    if not followup_id:
+        return gr.Markdown("No followup ID available.")
+    result = client.base_qna(messages=chat, system_prompt=SYSTEM_PROMPT_MAP)
+    return format_places(result)
+
+# Build UI
+with gr.Blocks(css=css, fill_height=True) as demo:
+    followup_state = gr.State(None)
+    with gr.Row():
+        with gr.Column(scale=3):
+            with gr.Row():
+                btn_local_map = gr.Button("Local Map Search", variant="secondary", size="sm")
+                btn_knowledge = gr.Button("Knowledge Base", variant="secondary", size="sm")
+            chat = gr.ChatInterface(
+                fn=chat_function,
+                type="messages",
+                additional_inputs=[followup_state],
+                additional_outputs=[followup_state],
+            )
+            # Wire up the buttons to append to chat history
+            btn_local_map.click(
+                append_local_map,
+                inputs=[followup_state, chat.chatbot],
+                outputs=chat.chatbot
+            )
+            btn_knowledge.click(
+                append_knowledge,
+                inputs=[followup_state, chat.chatbot],
+                outputs=chat.chatbot
+            )
+        with gr.Column(scale=1):
+            gr.Markdown("### Advanced Search Options")
+            with gr.Column(variant="panel"):
+                btn_images = gr.Button("Search Images")
+                btn_videos = gr.Button("Search Videos")
+                btn_links = gr.Button("Search Links")
+                gallery_output = gr.Gallery(label="Image Results", columns=2)
+                video_output = gr.Gallery(label="Video Results", columns=1, visible=True)
+                links_output = gr.Markdown(label="Links Results")
+                btn_images.click(
+                    perform_image_search,
+                    inputs=[followup_state],
+                    outputs=[gallery_output]
+                )
+                btn_videos.click(
+                    perform_video_search,
+                    inputs=[followup_state],
+                    outputs=[video_output]
+                )
+                btn_links.click(
+                    perform_links_search,
+                    inputs=[followup_state],
+                    outputs=[links_output]
+                )
+    demo.launch()
+</code_snippet>
+
+[helper.py]:
+<code_snippet>
+# old code helpers as it was earlier.
+# embed_video, 
+# embed_image, 
+# format_links, 
+# embed_google_map, 
+# format_knowledge
+
+# newly added. Note: fix it (as you did earlier with other helpers) if `format_followup_questions` has any issues.
+
+def format_followup_questions(questions: List[str]) -> str:
+    """
+    Given a list of follow-up questions, return a Markdown string
+    with each question as a bulleted list item.
+    """
+    if not questions:
+        return "No follow-up questions provided."
+
+    questions_md = "### Follow-up Questions\n\n"
+    for question in questions:
+        questions_md += f"- {question}\n"
+    return questions_md
+</code_snippet>
+
+
+[follow_up]:
+
+Implement Parsing:
+Make sure to extract the data and parse it properly:
+----------
+def format_followup_questions(questions) -> str:
+    """
+    questions are exactly same as this: 
+    
+json
+        {
+        "followup_question": ["What materials are needed to make a slingshot?", "How to make a slingshot more powerful?"]
+        }
+
+    """
+    if not questions:
+        return "No follow-up questions provided."
+
+    questions_md = "### Follow-up Questions\n\n"
+    for question in questions:
+        questions_md += f"- {question}\n"
+    return questions_md
+
+
+[follow_up]:
+
+i was lazy to put them
+
+make sure to remove the "   json    " before parsing.
+
+[follow_up]:
+
+No need to display two times follow up questions. Remove second one. Radio buttons enough.
+---------------------
+
+# Below the chat input, display follow-up questions and let user select one.
+            followup_radio = gr.Radio(
+                choices=[], label="Follow-up Questions (select one and click Send Follow-up)"
+            )
+            btn_send_followup = gr.Button("Send Follow-up")
+            # When a follow-up question is sent, update the chat conversation, followup state, and follow-up list.
+            btn_send_followup.click(
+                fn=handle_followup_click,
+                inputs=[followup_radio, followup_state, chat_history_state],
+                outputs=[chat.chatbot, followup_state, followup_md_state]
+            )
+            # Also display the follow-up questions markdown (for reference) in a Markdown component.
+            followup_markdown = gr.Markdown(label="Follow-up Questions", value="", visible=True)
+            # When the followup_md_state updates, also update the radio choices.
+            def update_followup_radio(md_text):
+                # Assume the helper output is a Markdown string with list items.
+                # We split the text to extract the question lines.
+                lines = md_text.splitlines()
+                questions = []
+                for line in lines:
+                    if line.startswith("- "):
+                        questions.append(line[2:])
+                return gr.update(choices=questions, value=None), md_text
+            followup_md_state.change(
+                fn=update_followup_radio,
+                inputs=[followup_md_state],
+                outputs=[followup_radio, followup_markdown]
+            )
+
+[follow_up]:
+
+
+
+
+[follow_up]:
+
+
+
+
+[follow_up]:

prompts.py

@@ -43,4 +43,24 @@ Here's JSON format example:
 ######NOTE######
 Make sure to return only JSON data! Nothing else!
 ######SYSTEM SHUTDOWN######
-"""
+"""
+
+SYSTEM_PROMPT_KNOWLEDGE_BASE = """
+######SYSTEM INIATED######
+You will be given a content from conversation chat (e.g., text/ paragraph).
+Your task is to analyze the given content and provide a knowledge base response based on the given content.
+For example: If the given content (conversation chat) was about "How to make a slingshot".
+You should analyze it and find the exact creator or founder or inventor of the slingshot.
+Let's assume you just found out that the slingshot was invented by "Charles Goodyear".
+Then return `question` in a JSON format. (e.g., {"question": "Who is Charles Goodyear?"}).
+Your final output should be a JSON data with the knowledge base response.
+Here's JSON format example:
+```json
+{
+  "question": "Who is Charles Goodyear?",
+}
+```
+######NOTE######
+Make sure to return only JSON data! Nothing else!
+######SYSTEM SHUTDOWN######
+"""

requirements.txt

@@ -1,4 +1,5 @@
 openai
 gradio
 python-dotenv
-requests
+requests
+pytube

test_api.py

@@ -1,21 +1,35 @@
-import os
+import requests
 from openai import OpenAI
+import os
+from dotenv import load_dotenv
+
+load_dotenv()
+# Insert your AIML API Key instead of <YOUR_API_KEY>:
+API_KEY = os.getenv("AIML_API_KEY")
+API_URL = 'https://api.aimlapi.com'
 
-client = OpenAI(
-    base_url="https://api.aimlapi.com/v1",
-    api_key=os.getenv("AIML_API_KEY"),
-)
+# Call the standart chat completion endpoint to get an ID
+def _complete_chat():
+    client = OpenAI(
+        base_url=API_URL,
+        api_key=API_KEY,
+    )    
 
-response = client.chat.completions.create(
-    model="gpt-4o",
-    messages=[
-        {
-            "role": "user",
-            "content": "Tell me, why is the sky blue?"
-        },
-    ],
-)
+    response = client.chat.completions.create(
+        model="bagoodex/bagoodex-search-v1",
+        messages=[
+            {
+                "role": "user",
+                
+                # Enter your query here
+                "content": 'how to make a slingshot',
+            },
+        ],
+    )
+    
+    
+    print(response.choices[0].message.content)
 
-message = response.choices[0].message.content
 
-print(f"Assistant: {message}")
+# Run the function
+# _complete_chat()

test_app.py

@@ -1,41 +0,0 @@
-import gradio as gr
-import re
-
-def embed_google_map(map_url):
-    """
-    Extracts a textual location from the Google Maps URL and returns
-    an embedded Google Map iframe.
-    """
-    # Simple approach: try to extract "San+Francisco,+CA" from the URL
-    # by capturing what's after '/maps/place/'
-    match = re.search(r'/maps/place/([^/]+)', map_url)
-    if not match:
-        return "Invalid Google Maps URL. Could not extract location."
-
-    location_text = match.group(1)
-    # location_text might contain extra parameters, so let's just
-    # strip everything after the first '?' or '/':
-    location_text = re.split(r'[/?]', location_text)[0]
-
-    embed_html = f"""
-    <iframe
-      width="600"
-      height="450"
-      style="border:0"
-      loading="lazy"
-      allowfullscreen
-      src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q={location_text}">
-    </iframe>
-    """
-    return embed_html
-
-with gr.Blocks() as demo:
-    map_url_input = gr.Textbox(label="Enter Google Maps URL")
-    map_output = gr.HTML(label="Embedded Google Map")
-
-    map_url_input.change(embed_google_map, inputs=map_url_input, outputs=map_output)
-
-demo.launch()
-
-
-# <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d11988.613116381091!2d69.19850824650604!3d41.3055290002301!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38ae8bc5b351bc23%3A0x707af898bf0cdb4d!2sEsenin%20St%2018%2C%20Tashkent%2C%20Uzbekistan!5e0!3m2!1sen!2s!4v1740469397909!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>