Update app.py

app.py

@@ -1,4 +1,5 @@
 import json
+
 import gradio as gr
 import spaces
 from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
@@ -11,6 +12,7 @@ tokenizer = AutoTokenizer.from_pretrained("Ashikan/dut-recipe-generator")
 model = AutoModelForCausalLM.from_pretrained("Ashikan/dut-recipe-generator")
 pipe = pipeline("text-generation", model=model, tokenizer=tokenizer, device=get_device_id())
 
+
 @spaces.GPU
 def perform_model_inference(ingredients_list):
     for ingredient_index in range(len(ingredients_list)):
@@ -32,77 +34,28 @@ def generate_recipe(ingredients):
 
         return {
             generated_recipe: gr.Markdown(value=generated_text, label="Generated Recipe",
-                                          elem_id="recipe-container", visible=True),
-            loading_message: gr.Markdown(value="", visible=False)  # Hide loading message after generation
+                                          elem_id="recipe-container", visible=True)
         }
     else:
         error_text = "## Invalid ingredients. Please include at least 2 ingredients in a comma-separated list. e.g. brown rice, onions, garlic"
 
         return {
-            generated_recipe: gr.Markdown(value=error_text, elem_id="recipe-container", visible=True),
-            loading_message: gr.Markdown(value="", visible=False)  # Hide loading message
+            generated_recipe: gr.Markdown(value=error_text, elem_id="recipe-container", visible=True)
         }
 
-def show_loading_message():
-    return gr.Markdown(value="Processing... Please wait.", visible=True)
-
-def hide_loading_message():
-    return gr.Markdown(value="", visible=False)
-
-with gr.Blocks(css="""
-    #chat-container {
-        background-color: #f7f7f8;
-        border-radius: 10px;
-        padding: 20px;
-        max-width: 800px;
-        margin: auto;
-        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-    }
-
-    .chat-message {
-        border-radius: 8px;
-        padding: 10px;
-        margin-bottom: 10px;
-        font-family: Arial, sans-serif;
-    }
-
-    .user-message {
-        background-color: #e6f7ff;
-        text-align: left;
-    }
-
-    .bot-message {
-        background-color: #f0f0f0;
-        text-align: left;
-    }
-
-    .gr-button {
-        background-color: #0073e6 !important;
-        color: white !important;
-        border: none !important;
-        border-radius: 5px !important;
-    }
-
-    .gr-textbox input {
-        border-radius: 5px;
-        border: 1px solid #ccc;
-        padding: 10px;
-    }
-""") as recipegen:
-
-    gr.Markdown("# Recipe Generator", elem_id="header")
+
+with gr.Blocks(css="./css/styles.css") as recipegen:
     gr.Markdown("### An AI Model Attempting To Produce Healthier, Diabetic-Friendly Recipes",
                 elem_id="header-sub-heading")
     gr.Markdown("Start by entering a comma-separated list of ingredients below.", elem_id="header-instructions")
     
-    with gr.Column(elem_id="chat-container"):
-        # Create a chat interface to simulate ChatGPT
-        chatbot = gr.Chatbot(elem_id="chatbot-container", label="Recipe Generator Chat")
-        user_input = gr.Textbox(label="Enter Ingredients (comma-separated)", placeholder="e.g. chicken, onions, garlic", autofocus=True, max_lines=1, elem_id="ingredients-input")
-        generate_button = gr.Button(value="Generate Recipe")
-        clear_button = gr.Button(value="Clear")  # Clear button to reset the chat
-        loading_message = gr.Markdown(value="", visible=False)  # Loading message
-
+    with gr.Column() as column:
+        user_ingredients = gr.Textbox(label="Ingredients", autofocus=True, max_lines=1, elem_id="ingredients-input")
+        generate_button = gr.Button(value="Generate")
+        
+    with gr.Column():
+        generated_recipe = gr.Markdown(visible=True)
+        
     examples = gr.Examples(
         elem_id="examples",
         examples=[
@@ -111,28 +64,13 @@ with gr.Blocks(css="""
             "strawberries, vanilla, honey, rolled oats, almonds, butter",
             "hake, spring onion, lemon"
         ],
-        inputs=[user_input]
+        inputs=[user_ingredients]
     )
 
-    # Show loading message when clicking generate button
-    generate_button.click(
-        fn=show_loading_message,
-        outputs=[loading_message]
-    )
-
-    # Hide the loading message and generate the recipe
     generate_button.click(
         fn=generate_recipe,
-        inputs=[user_input],
-        outputs=[chatbot, loading_message]
+        inputs=[user_ingredients],
+        outputs=[generated_recipe]
     )
 
-    # Clear inputs and outputs when the "Clear" button is clicked
-    def clear_all():
-        return gr.update(value=""), gr.update(value=""), gr.update(value="", visible=False)  # Clear input, output, and hide spinner
-
-    clear_button.click(fn=clear_all, outputs=[user_input, chatbot, loading_message])
-
 recipegen.launch(share=True)
-
-