added more models, refactored a lot of stuff

README.md

@@ -15,18 +15,19 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 
 ### TODOs
 
-- [ ] Refactor the vectordb.py - remove code duplication
+- [x] Refactor the vectordb.py - remove code duplication
 
 - [x] Sustainability - database paths - move to HF
 
 - [ ] Fix it for the new models e.g. Llama and others
 
 - [ ] Add the space secrets to have it running online
-
   - [ ] Fix the google application json file
 
 - [ ] Make the space public
 
 - [x] Add emissions calculation and starting point
 - [x] Add more cities to starting point
-- [ ] Experiment with the sustainability & without sustainability prompt
+- [ ] Experiment with the sustainability & without sustainability prompt
+- [ ] Adapt the gradio examples to the right format
+- [x] UI refactoring

app.py

@@ -1,102 +1,37 @@
-from typing import Optional
 import gradio as gr
 import sys
 
+from src.ui.components.actions import generate_text, clear
+from src.ui.components.inputs import main_component
+from src.ui.components.static import load_buttons, load_examples, model_settings
+from src.ui.setup import load_html_from_file
+from src.text_generation.vertexai_setup import initialize_vertexai_params
 sys.path.append("./src")
-from src.pipeline import pipeline
-from src.helpers.data_loaders import load_places
-
-
-def clear():
-    return None, None, None
-
-
-# Function to update the list of cities based on the selected country
-def update_cities(selected_country, df):
-    filtered_cities = df[df['country'] == selected_country]['city'].tolist()
-    return gr.Dropdown(choices=filtered_cities, interactive=True)  # Make it interactive as it is not by default
-
-
-def generate_text(query_text, model_name: Optional[str], is_sustainable: Optional[bool], tokens: Optional[int] = 1024,
-                  temp: Optional[float] = 0.49, starting_point: Optional[str] = "Munich"):
-    pipeline_response = pipeline(
-        query=query_text,
-        model_name=model_name,
-        sustainability=is_sustainable,
-        starting_point=starting_point,
-    )
-    return pipeline_response
 
 
 def create_ui():
-    data_file = "cities/eu_200_cities.csv"
-    df = load_places(data_file)
-    df = df.sort_values(by=['country', 'city'])
-
-    examples = [
-        ["I'm planning a vacation to France. Can you suggest a one-week itinerary including must-visit places and "
-         "local cuisines to try?", "GPT-4"],
-        ["I want to explore off-the-beaten-path destinations in Europe, any suggestions?", "Gemini-1.0-pro"],
-        ["Suggest some cities that can be visited from London and are very rich in history and culture.",
-         "Gemini-1.0-pro"],
-    ]
-
-    with gr.Blocks() as app:
-        gr.HTML(
-            "<center><h1 style='font-size:xx-large; font-color: green'>🍀 Green City Finder 🍀</h1><h3>AI Sprint 2024 submissions by Ashmi Banerjee. </h3></center> <br><p>We're testing the "
-            "compatibility of"
-            "Retrieval Augmented Generation (RAG) implementations with Google's <b>Gemma-2b-it</b> & <b>Gemini 1.0 "
-            "Pro</b> \n "
-            "models through HuggingFace and VertexAI, respectively, to generate sustainable travel recommendations.\n "
-            "We use the Wikivoyage dataset to provide city recommendations based on user queries. The vector "
-            "embeddings are stored in a VectorDB (LanceDB) hosted in Google Cloud.\n "
-            "<p>Sustainability is calculated based on the work by <a href=https://arxiv.org/abs/2403.18604>Banerjee "
-            "et al.</a></p>\n "
-            "        </p> <br>Google Cloud credits are provided for this project. </p>\n"
-            "        ")
-
-        with gr.Group():
-            countries = gr.Dropdown(choices=list(df.country.unique()), multiselect=False, label="Country")
-            starting_point = gr.Dropdown(choices=[], multiselect=False,
-                                         label="Select your starting point for the trip!")
-
-            countries.select(fn=lambda selected_country:
-                             update_cities(selected_country, df),
-                             inputs=countries, outputs=starting_point)
-
-            query = gr.Textbox(label="Query", placeholder="Ask for your city recommendation here!")
-            sustainable = gr.Checkbox(label="Sustainable", info="Do you want your recommendations to be sustainable "
-                                                                "with regards to the environment, your starting "
-                                                                "location and month of travel?")
-            # TODO: Add model options, month and starting point
-            model = gr.Dropdown(
-                ["GPT-4", "Gemini-1.0-pro"], label="Model", info="Select your model. Will add more "
-                                                                 "models "
-                                                                 "later!",
-            )
-            output = gr.Textbox(label="Generated Results", lines=4)
-
-            with gr.Accordion("Settings", open=False):
-                max_new_tokens = gr.Slider(label="Max new tokens", value=1024, minimum=0, maximum=8192, step=64,
-                                           interactive=True,
-                                           visible=True, info="The maximum number of output tokens")
-                temperature = gr.Slider(label="Temperature", step=0.01, minimum=0.01, maximum=1.0, value=0.49,
-                                        interactive=True,
-                                        visible=True, info="The value used to module the logits distribution")
-        with gr.Group():
-            with gr.Row():
-                submit_btn = gr.Button("Submit", variant="primary")
-                clear_btn = gr.Button("Clear", variant="secondary")
-                cancel_btn = gr.Button("Cancel", variant="stop")
-        submit_btn.click(generate_text, inputs=[query, model, sustainable, starting_point], outputs=[output])
-        clear_btn.click(clear, inputs=[], outputs=[query, model, output])
-        cancel_btn.click(clear, inputs=[], outputs=[query, model, output])
-
-        gr.Markdown("## Examples")
-        # gr.Examples(
-        #     examples, inputs=[query, model], label="Examples", fn=generate_text, outputs=[output],
-        #     cache_examples=True,
-        # )
+    initialize_vertexai_params()
+    # Path to HTML file
+    html_file_path = 'src/ui/templates/intro.html'
+
+    # Create the Gradio HTML component
+    html_content = load_html_from_file(html_file_path)
+    with gr.Blocks(theme=gr.themes.Default(primary_hue=gr.themes.colors.green, secondary_hue=gr.themes.colors.blue)) as app:
+
+        gr.HTML(html_content)
+        country, starting_point, query, sustainable, model = main_component()
+        output = gr.Textbox(label="Generated Results", lines=4)
+        max_new_tokens, temperature = model_settings()
+
+        # Load the buttons for the interface
+        load_buttons(query, model,
+                     sustainable, starting_point,
+                     max_new_tokens, temperature,
+                     output,
+                     generate_text_fn=generate_text,
+                     clear_fn=clear)
+        # Load the examples for the interface
+        # load_examples(country, starting_point, query, model, sustainable, output, generate_text)
     return app
 
 

src/augmentation/prompt_generation.py

@@ -1,4 +1,4 @@
-from information_retrieval import info_retrieval as ir
+from src.information_retrieval import info_retrieval as ir
 import logging
 
 logger = logging.getLogger(__name__)

src/pipeline.py

@@ -15,14 +15,17 @@ from text_generation.models import (
     Phi3SmallInstruct,
     GPT4,
     Gemini,
+    Claude3Point5Sonnet,
 )
 from text_generation import text_generation as tg
 import logging
 
 logger = logging.getLogger(__name__)
 logging.basicConfig(encoding='utf-8', level=logging.DEBUG)
+from src.text_generation.mapper import MODEL_MAPPER
 
 TEST_DIR = "../tests/"
+
 MODELS = {
     'GPT-4': GPT4,
     'Llama3': Llama3,
@@ -33,11 +36,15 @@ MODELS = {
     'Mistral-Instruct': MistralInstruct,
     'Llama3.1-Instruct': Llama3Point1Instruct,
     'Phi3-Instruct': Phi3SmallInstruct,
-    'Gemini-1.0-pro': Gemini,
+    "Gemini-1.0-pro": Gemini,
+    "Claude3.5-sonnet": Claude3Point5Sonnet,
 }
 
 
-def pipeline(starting_point: str, query: str, model_name: str, test: int = 0, **params):
+def pipeline(starting_point: str,
+             query: str,
+             model_name: str,
+             test: int = 0, **params):
     """
     
     Executes the entire RAG pipeline, provided the query and model class name.
@@ -53,9 +60,11 @@ def pipeline(starting_point: str, query: str, model_name: str, test: int = 0, **
 
     
     """
-
-    model = MODELS[model_name]
-
+    try:
+        model_id = MODEL_MAPPER[model_name]
+    except KeyError:
+        logger.error(f"Model {model_name} not found in the model mapper.")
+        model_id = MODEL_MAPPER['Gemini-1.0-pro']
     context_params = {
         'limit': 5,
         'reranking': 0,
@@ -97,9 +106,9 @@ def pipeline(starting_point: str, query: str, model_name: str, test: int = 0, **
 
     # return prompt
 
-    logger.info(f"Augmented prompt, initializing {model} and generating response..")
+    logger.info(f"Augmented prompt, initializing {model_name} and generating response..")
     try:
-        response = tg.generate_response(model, prompt)
+        response = tg.generate_response(model_id, prompt, **params)
     except Exception as e:
         exc_type, exc_obj, exc_tb = sys.exc_info()
         logger.info(f"Error at line {exc_tb.tb_lineno} while generating response: {e}")
@@ -117,11 +126,11 @@ if __name__ == "__main__":
     # suggest " \ "some " \ "European cities? "
     sample_query = "I'm planning a trip in July and enjoy beaches, nightlife, and vibrant cities. Recommend some " \
                    "cities. "
-    model = "GPT-4"
+    model_name = "GPT-4"
 
     pipeline_response = pipeline(
         query=sample_query,
-        model_name=model,
+        model_name=model_name,
         sustainability=1
     )
 

src/text_generation/mapper.py

@@ -0,0 +1,16 @@
+MODEL_MAPPER = {
+    'Gemma-2-9B-it': "google/gemma-2-9b-it",
+    'Gemma-2-2B-it': "google/gemma-2-2b-it",
+    "Gemini-1.0-pro": "gemini-1.0-pro",
+    "Gemini-1.5-Flash": "gemini-1.5-flash-001",
+    "Gemini-1.5-Pro": "gemini-1.5-pro-001",
+    "Claude3.5-sonnet": "claude-3-5-sonnet@20240620",
+    'GPT-4': "gpt-4o-mini",
+    'Llama3': "meta-llama/Meta-Llama-3-8B",
+    'Mistral': "mistralai/Mistral-7B",
+    'Llama3.1': "meta-llama/Meta-Llama-3.1-8B",
+    'Llama3-Instruct': "meta-llama/Meta-Llama-3-8B-Instruct",
+    'Mistral-Instruct': "mistralai/Mistral-7B-Instruct-v0.1",
+    'Llama3.1-Instruct': "meta-llama/Meta-Llama-3.1-8B-Instruct",
+    'Phi3-Instruct': "microsoft/Phi-3-small-128k-instruct",
+}

src/text_generation/model_init.py

@@ -1,123 +1,140 @@
-import torch
-from transformers import AutoTokenizer, AutoModelForCausalLM, BitsAndBytesConfig
 from vertexai.generative_models import GenerativeModel
-
 from dotenv import load_dotenv
 from anthropic import AnthropicVertex
 import os
 from openai import OpenAI
-from src.text_generation.vertexai_setup import initialize_vertexai_params
+from src.text_generation.vertexai_setup import initialize_vertexai_params, get_default_config
+from huggingface_hub import InferenceClient
 
+# Load environment variables
 load_dotenv()
-if "OPENAI_API_KEY" in os.environ:
-    OAI_API_KEY = os.environ["OPENAI_API_KEY"]
-if "VERTEXAI_PROJECTID" in os.environ:
-    VERTEXAI_PROJECT = os.environ["VERTEXAI_PROJECTID"]
+OAI_API_KEY = os.getenv("OPENAI_API_KEY")
+
+
+def _validate_tokens(max_tokens: int) -> int:
+    """
+    Validates the max_tokens parameter. Ensures it's within a valid range (1 to 8192).
+    If invalid, defaults to 8192.
+    """
+    if 1 <= max_tokens <= 8192:
+        return max_tokens
+    return 8192
+
+
+def _validate_temperature(temp: float) -> float:
+    """
+    Validates the temperature parameter. Ensures it's within a valid range (0 to 1).
+    If invalid, defaults to 0.49.
+    """
+    if 0 <= temp <= 1:
+        return temp
+    return 0.49
 
 
 class LLMBaseClass:
     """
-    Base Class for text generation - user needs to provide the HF model ID while instantiating the class after which
-    the generate method can be called to generate responses
-    
+    Base class for text generation. Users provide the HF model ID or other model identifiers
+    and can call the generate method to get responses.
     """
 
-    def __init__(self, model_id) -> None:
-
-        match (model_id[0].lower()):
-            case "gpt-4o-mini":  # for open AI models
-                self.api_key = OAI_API_KEY
-                self.model = OpenAI(api_key=self.api_key)
-            case "claude-3-5-sonnet@20240620":  # for Claude through vertexAI
-                self.api_key = None
-                self.model = AnthropicVertex(region="europe-west1", project_id=VERTEXAI_PROJECT)
-            case "gemini-1.0-pro":
-                self.api_key = None
-                self.model = GenerativeModel(model_id[0].lower())
-            case _:  # for HF models
-                self.api_key = None
-                self.tokenizer = AutoTokenizer.from_pretrained(model_id)
-                self.tokenizer.pad_token = self.tokenizer.eos_token
-
-                self.tokenizer.chat_template = "{%- for message in messages %}{%- if message['role'] == 'user' %}{{- " \
-                                               "bos_token + '[INST] ' + message['content'].strip() + ' [/INST]' }}{%- " \
-                                               "elif " \
-                                               "message['role'] == 'system' %}{{- '<<SYS>>\\n' + message[" \
-                                               "'content'].strip() + " \
-                                               "'\\n<</SYS>>\\n\\n' }}{%- elif message['role'] == 'assistant' %}{{- '[" \
-                                               "ASST] ' " \
-                                               "+ message['content'] + ' [/ASST]' + eos_token }}{%- endif %}{%- " \
-                                               "endfor %} "
-                # Initialize quantization to use less GPU
-                if torch.cuda.is_available():
-                    bnb_config = BitsAndBytesConfig(
-                        load_in_4bit=True, bnb_4bit_use_double_quant=True, bnb_4bit_quant_type="nf4",
-                        bnb_4bit_compute_dtype=torch.bfloat16
-                    )
-                else:
-                    bnb_config = None
-                self.model = AutoModelForCausalLM.from_pretrained(
-                    model_id,
-                    torch_dtype=torch.bfloat16,
-                    device_map="auto",
-                    quantization_config=bnb_config,
-                )
-
-                self.model.generation_config.pad_token_id = self.tokenizer.pad_token_id
-
-                self.terminators = [
-                    self.tokenizer.eos_token_id,
-                    self.tokenizer.convert_tokens_to_ids("<|eot_id|>")
-                ]
+    def __init__(self, model_id: str, max_tokens: int, temp: float) -> None:
+        self.model_id = model_id
+        self.api_key = None
+        self.temp = _validate_temperature(temp)
+        self.tokens = _validate_tokens(max_tokens)
+        self.model = self._initialize_model()
+
+    def _initialize_model(self):
+        """
+        Initialize the model based on the provided model ID.
+        """
+        if self.model_id == "gpt-4o-mini":
+            return self._initialize_openai_model()
+        elif self.model_id == "claude-3-5-sonnet@20240620":
+            return self._initialize_claude_model()
+        elif self.model_id in ["claude-3-5-sonnet@20240620",
+                               "gemini-1.0-pro", "gemini-1.5-flash-001", "gemini-1.5-pro-001"]:
+            return self._initialize_vertexai_model()
+        else:
+            return self._initialize_hf_model()
+
+    def _initialize_openai_model(self):
+        """
+        Initialize OpenAI model.
+        """
+        self.api_key = OAI_API_KEY
+        return OpenAI(api_key=self.api_key)
+
+    def _initialize_claude_model(self):
+        """
+        Initialize Claude model using Anthropic via Vertex AI.
+        """
+        self.api_key = os.getenv("VERTEXAI_PROJECTID")
+        return AnthropicVertex(region="europe-west1", project_id=self.api_key)
+
+    def _initialize_vertexai_model(self):
+        """
+        Initialize Google Gemini model using Vertex AI.
+        """
+        default_gen_config, default_safe_settings = get_default_config()
+        gen_config = {
+            "temperature": self.temp,
+            "max_output_tokens": self.tokens,
+        }
+        return GenerativeModel(self.model_id,
+                               generation_config=default_gen_config if gen_config is None else gen_config,
+                               safety_settings=default_safe_settings)
+
+    def _initialize_hf_model(self):
+        self.api_key = os.getenv("HF_TOKEN")
+        return InferenceClient(token=self.api_key, model=self.model_id)
 
     def generate(self, messages):
-        match (self.model_id[0].lower()):
-            case "gpt-4o-mini":
-                completion = self.model.chat.completions.create(
-                    model=self.model_id[0],
-                    messages=messages,
-                    temperature=0.6,
-                    top_p=0.9,
-                )
-                # Return the generated content from the API response
-                return completion.choices[0].message.content
-            case "claude-3-5-sonnet@20240620" | "gemini-1.0-pro":
-                initialize_vertexai_params()
-                if "claude" in self.model_id[0].lower():
-                    message = self.model.messages.create(
-                        max_tokens=1024,
-                        model=self.model_id[0],
-                        messages=[
-                            {
-                              "role": "user",
-                              "content": messages[0]["content"],
-                            }
-                          ],
-                    )
-                    return message.content[0].text
-                else:
-                    response = self.model.generate_content(messages[0]["content"])
-                    return response
-            case _:
-                input_ids = self.tokenizer.apply_chat_template(
-                    conversation=messages,
-                    add_generation_prompt=True,
-                    return_tensors="pt",
-                    padding=True
-                ).to(self.model.device)
-
-                outputs = self.model.generate(
-                    input_ids,
-                    max_new_tokens=1024,
-                    # eos_token_id=self.terminators,
-                    pad_token_id=self.tokenizer.eos_token_id,
-                    do_sample=True,
-                    temperature=0.6,
-                    top_p=0.9,
-                )
-                response = outputs[0][input_ids.shape[-1]:]
-
-                return self.tokenizer.decode(response, skip_special_tokens=True)
-
-
-# database/wikivoyage/wikivoyage_listings.lance/data/e2940f51-d754-4b54-a688-004bdb8e7aa2.lance
+        """
+        Generate responses based on the model type and provided messages.
+        """
+        if self.model_id == "gpt-4o-mini":
+            return self._generate_openai(messages)
+        elif self.model_id in ["claude-3-5-sonnet@20240620",
+                               "gemini-1.0-pro", "gemini-1.5-flash-001", "gemini-1.5-pro-001"]:
+            return self._generate_vertexai(messages)
+        else:
+            return self._generate_hf(messages)
+
+    def _generate_openai(self, messages):
+        """
+        Generate responses using OpenAI model.
+        """
+        completion = self.model.chat.completions.create(
+            model=self.model_id,
+            messages=messages,
+            temperature=self.temp,
+            max_tokens=self.tokens,
+        )
+        return completion.choices[0].message.content
+
+    def _generate_vertexai(self, messages):
+        """
+        Generate responses using Claude or Gemini models via Vertex AI.
+        """
+        initialize_vertexai_params()
+        content = " ".join([message["content"] for message in messages])
+        if "claude" in self.model_id:
+            message = self.model.messages.create(
+                max_tokens=self.tokens,
+                model=self.model_id,
+                messages=[{"role": "user", "content": content}],
+            )
+            return message.content[0].text
+        else:
+            response = self.model.generate_content(content)
+            return response.text
+
+    def _generate_hf(self, messages):
+        """
+        Generate responses using Hugging Face models.
+        """
+        response = self.model.chat_completion(
+            messages=[{"role": "user", "content": messages[0]["content"] + messages[1]["content"]}],
+            max_tokens=self.tokens, temperature=self.temp)
+        return response.choices[0].message.content

src/text_generation/text_generation.py

@@ -1,20 +1,13 @@
-from augmentation import prompt_generation as pg
-from information_retrieval import info_retrieval as ir
-from src.text_generation.models import (
-    Llama3,
-    Mistral,
-    Gemma2,
-    Llama3Point1,
-    GPT4,
-    Claude3Point5Sonnet,
-)
+from src.augmentation import prompt_generation as pg
+from src.information_retrieval import info_retrieval as ir
+from src.text_generation.model_init import LLMBaseClass
 import logging
 
 logger = logging.getLogger(__name__)
 logging.basicConfig(encoding='utf-8', level=logging.DEBUG)
 
 
-def generate_response(model, prompt):
+def generate_response(model, prompt: list, **params):
     """
     
     Function that initializes the LLM class and calls the generate function.
@@ -26,7 +19,9 @@ def generate_response(model, prompt):
     """
 
     logger.info(f"Initializing LLM configuration for {model}")
-    llm = model()
+    llm = LLMBaseClass(model_id=model,
+                       max_tokens=params['max_tokens'],
+                       temp=params['temperature'])
 
     logger.info("Generating response")
     try:
@@ -73,6 +68,7 @@ def test(model):
     logger.info(f"Augmented prompt, initializing {model} and generating response..")
     try:
         response = generate_response(model, without_sfairness)
+        print(response)
     except Exception as e:
         logger.info(f"Error while generating response: {e}")
         return None

src/text_generation/vertexai_setup.py

@@ -5,6 +5,11 @@ import vertexai
 import os
 import json
 import base64
+import logging
+from vertexai import generative_models
+
+logger = logging.getLogger(__name__)
+logging.basicConfig(encoding='utf-8', level=logging.DEBUG)
 
 load_dotenv()
 if "VERTEXAI_PROJECTID" in os.environ:
@@ -12,7 +17,7 @@ if "VERTEXAI_PROJECTID" in os.environ:
 
 
 def decode_service_key():
-    encoded_key = os.environ["GOOGLE_APPLICATION_CREDENTIALS"]
+    encoded_key = os.environ["GOOGLE_CREDENTIALS"]
     original_service_key = json.loads(base64.b64decode(encoded_key).decode('utf-8'))
     if original_service_key:
         return original_service_key
@@ -20,7 +25,6 @@ def decode_service_key():
 
 
 def initialize_vertexai_params(location: Optional[str] = "us-central1"):
-
     creds_file_name = os.getcwd() + "/.config/gcp_default_credentials.json"
     print(creds_file_name)
     if not os.path.exists(os.path.dirname(creds_file_name)):
@@ -35,3 +39,16 @@ def initialize_vertexai_params(location: Optional[str] = "us-central1"):
         scopes=["https://www.googleapis.com/auth/cloud-platform"],
     )
     vertexai.init(project=VERTEXAI_PROJECT, location=location)
+    logger.info("Vertex AI initialized")
+
+
+def get_default_config() -> tuple[dict, dict]:
+    default_gen_config = {
+        "temperature": 0.49,
+        "max_output_tokens": 1024,
+    }
+    default_safety_settings = {
+        generative_models.HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT: generative_models.HarmBlockThreshold.BLOCK_LOW_AND_ABOVE,
+        generative_models.HarmCategory.HARM_CATEGORY_HARASSMENT: generative_models.HarmBlockThreshold.BLOCK_LOW_AND_ABOVE,
+    }
+    return default_gen_config, default_safety_settings

src/ui/components/actions.py

@@ -0,0 +1,30 @@
+from typing import Optional
+
+from src.pipeline import pipeline
+
+
+def clear():
+    return None, None, None, None, None
+
+
+def generate_text(query_text: str,
+                  model_name: Optional[str],
+                  is_sustainable: Optional[bool],
+                  starting_point: Optional[str],
+                  max_tokens: Optional[int] = 1024,
+                  temp: Optional[float] = 0.49,
+                  ):
+    model_params = {
+        'max_tokens': max_tokens,
+        'temperature': temp
+    }
+    pipeline_response = pipeline(
+        query=query_text,
+        model_name=model_name,
+        sustainability=is_sustainable,
+        starting_point=starting_point,
+        **model_params
+    )
+    if pipeline_response is None:
+        return "Error while generating response! Please try again."
+    return pipeline_response

src/ui/components/inputs.py

@@ -0,0 +1,69 @@
+from typing import Tuple
+
+import gradio as gr
+
+from src.helpers.data_loaders import load_places
+from src.text_generation.mapper import MODEL_MAPPER
+
+
+def get_places():
+    data_file = "cities/eu_200_cities.csv"
+    df = load_places(data_file)
+    df = df.sort_values(by=['country', 'city'])
+    return df
+
+
+# Function to update the list of cities based on the selected country
+def update_cities(selected_country, df):
+    filtered_cities = df[df['country'] == selected_country]['city'].tolist()
+    return gr.Dropdown(choices=filtered_cities, interactive=True)  # Make it interactive as it is not by default
+
+
+def main_component() -> Tuple[gr.Dropdown, gr.Dropdown, gr.Textbox, gr.Checkbox, gr.Dropdown]:
+    """
+    Creates the main Gradio interface components and returns them.
+
+    Returns:
+        Tuple containing:
+        - countries: Dropdown for selecting the country.
+        - starting_point: Dropdown for selecting the starting point.
+        - query: Textbox for entering the user query.
+        - sustainable: Checkbox for sustainable travel.
+        - model: Dropdown for selecting the model.
+    """
+    df = get_places()
+    country_names = list(df.country.unique())
+    with gr.Group():
+        # Country selection dropdown
+        countries = gr.Dropdown(choices=country_names, multiselect=False, label="Country")
+
+        # Starting point selection dropdown
+        starting_point = gr.Dropdown(choices=[], multiselect=False, label="Select your starting point for the trip!")
+
+        # When a country is selected, update the starting point options
+        countries.select(
+            fn=lambda selected_country: update_cities(selected_country, df),
+            inputs=countries,
+            outputs=starting_point
+        )
+
+        # User query input
+        query = gr.Textbox(label="Query", placeholder="Ask for your city recommendation here!")
+
+        # Checkbox for sustainable travel option
+        sustainable = gr.Checkbox(
+            label="Sustainable",
+            info="Do you want your recommendations to be sustainable with regards to the environment, "
+                 "your starting location, and month of travel?"
+        )
+
+        models = list(MODEL_MAPPER.keys())[:5]
+        # Model selection dropdown
+        model = gr.Dropdown(
+            choices=models,
+            label="Model",
+            info="Select your model. The model will generate the recommendations based on your query."
+        )
+
+    # Return all the components individually
+    return countries, starting_point, query, sustainable, model

src/ui/components/static.py

@@ -0,0 +1,139 @@
+from typing import Callable, Tuple, Optional
+
+import gradio as gr
+
+from src.ui.components.inputs import get_places, update_cities, main_component
+
+
+def load_examples(
+        country: gr.components.Component,
+        starting_point: gr.components.Component,
+        query: gr.components.Component,
+        model: gr.components.Component,
+        is_sustainable: gr.components.Component,
+        output: gr.components.Component,
+        generate_text_fn: Callable[
+            [str, Optional[str], Optional[bool], Optional[int], Optional[float], Optional[str]],
+            str],
+) -> gr.Examples:
+
+    df = get_places()
+    country_names = list(df.country.unique())
+
+    # Example data
+    country_example = "USA"
+    starting_point_example = "New York"
+    query_example = "What are some top tourist attractions?"
+    sustainable_example = True
+    model_example = "GPT-4"
+
+    # Update the starting point options based on the example country
+    starting_point_choices = update_cities(country_example, df)
+
+    # Set the choices and default value for the starting point dropdown
+    starting_point.choices = starting_point_choices
+    starting_point.value = starting_point_example
+
+    # Provide examples
+    examples = [
+        [country_example, starting_point_example, query_example, sustainable_example, model_example]
+    ]
+
+    # Create a Gradio Examples component
+    gr.Examples(
+        examples=examples,
+        inputs=[country, starting_point, query, is_sustainable, model],
+        outputs=[]
+    )
+
+
+def load_buttons(
+        query: gr.components.Component,
+        model: gr.components.Component,
+        sustainable: gr.components.Component,
+        starting_point: gr.components.Component,
+        max_new_tokens: gr.components.Component,
+        temperature: gr.components.Component,
+        output: gr.components.Component,
+        generate_text_fn: Callable[
+            [str, Optional[str], Optional[bool], Optional[int], Optional[float], Optional[str]],
+            str],
+        clear_fn: Callable[[], None]
+) -> gr.Group:
+    """
+    Load and return buttons for the Gradio interface.
+
+    Args:
+        query: The input component for user queries.
+        model: The input component for selecting the model.
+        sustainable: The input component for sustainable travel options.
+        starting_point: The input component for the user's starting point.
+        output: The output component for displaying the generated text.
+        generate_text_fn: The function to be called on submit to generate text.
+        clear_fn: The function to clear the input fields and output.
+
+    Returns:
+        Gradio Group component containing the buttons.
+    """
+    with gr.Group() as btns:
+        with gr.Row():
+            submit_btn = gr.Button("Submit", variant="primary")
+            clear_btn = gr.Button("Clear", variant="secondary")
+            cancel_btn = gr.Button("Cancel", variant="stop")
+
+        # Bind actions to the buttons
+        submit_btn.click(
+            fn=generate_text_fn,  # Function to generate text
+            inputs=[query, model, sustainable,
+                    starting_point, max_new_tokens,
+                    temperature],  # Input components for generation
+            outputs=[output]  # Output component
+        )
+        clear_btn.click(
+            fn=clear_fn,  # Function to clear inputs
+            inputs=[],  # No inputs for clearing
+            outputs=[query, model, sustainable, starting_point, output]  # Clear all inputs and output
+        )
+        cancel_btn.click(
+            fn=clear_fn,  # Function to cancel and clear inputs
+            inputs=[],  # No inputs for cancel
+            outputs=[query, model, sustainable, starting_point, output]  # Clear all inputs and output
+        )
+    return btns
+
+
+def model_settings() -> Tuple[gr.Slider, gr.Slider]:
+    """
+    Creates the model settings components and returns them.
+
+    Returns:
+        Tuple containing:
+        - max_new_tokens: Slider for setting the maximum number of new tokens.
+        - temperature: Slider for setting the temperature.
+    """
+    with gr.Accordion("Settings", open=False):
+        # Slider for maximum number of new tokens
+        max_new_tokens = gr.Slider(
+            label="Max new tokens",
+            value=1024,
+            minimum=0,
+            maximum=8192,
+            step=64,
+            interactive=True,
+            visible=True,
+            info="The maximum number of output tokens"
+        )
+
+        # Slider for temperature
+        temperature = gr.Slider(
+            label="Temperature",
+            step=0.01,
+            minimum=0.01,
+            maximum=1.0,
+            value=0.49,
+            interactive=True,
+            visible=True,
+            info="The value used to modulate the logits distribution"
+        )
+
+    return max_new_tokens, temperature

src/ui/setup.py

@@ -0,0 +1,19 @@
+from src.helpers.data_loaders import load_places
+
+
+# TODO add the gcp application json file loading
+# TODO examples
+
+def load_html_from_file(file_path: str) -> str:
+    """
+    Reads the HTML content from a file and returns it as a string.
+
+    Args:
+        file_path (str): The path to the HTML file.
+
+    Returns:
+        str: The HTML content of the file.
+    """
+    with open(file_path, 'r') as file:
+        return file.read()
+

src/ui/templates/intro.html

@@ -0,0 +1,15 @@
+<!-- intro.html -->
+<body>
+   <h1 style='font-size:xx-large; color: green; text-align: center'>🍀 Green City Finder 🍀</h1>
+   <h3 style="text-align: center">AI Sprint 2024 submissions by Ashmi Banerjee.</h3>
+   <br>
+   <p style="text-align: justify">We're testing the compatibility of
+      Retrieval Augmented Generation (RAG) implementations with Google's <b>Gemma-2b-it</b> & <b>Gemini 1.0 Pro</b>
+      models through HuggingFace and VertexAI, respectively, to generate sustainable travel recommendations.
+      We use the Wikivoyage dataset to provide city recommendations based on user queries. The vector embeddings are
+      stored in a VectorDB (LanceDB) hosted in Google Cloud.
+   </p>
+   <p style="text-align: justify">Sustainability is calculated based on the work by <a href="https://arxiv.org/abs/2403.18604">Banerjee et al.</a></p>
+   <br>
+   <p style="text-align: justify">Google Cloud credits are provided for this project.</p>
+</body>