Update app.py

app.py

@@ -1,9 +1,7 @@
 import json
-
 import gradio as gr
 import spaces
 from transformers import AutoTokenizer, AutoModelForCausalLM, pipeline
-
 from format.format_output import format_output
 from validate.validate_ingredients import validate_ingredients
 from device.get_device_id import get_device_id
@@ -30,11 +28,9 @@ def generate_recipe(ingredients):
     is_ingredients_valid = validate_ingredients(ingredients_list)
 
     if is_ingredients_valid:
-        generated_text = perform_model_inference(ingredients_list)
-
+        # Indicate that the recipe is being generated
         return {
-            generated_recipe: gr.Markdown(value=generated_text, label="Generated Recipe",
-                                          elem_id="recipe-container", visible=True)
+            generated_recipe: gr.Markdown(value="**Generating recipe...**", 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"
@@ -43,10 +39,40 @@ def generate_recipe(ingredients):
             generated_recipe: gr.Markdown(value=error_text, elem_id="recipe-container", visible=True)
         }
 
-
-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")
+def on_generate_click(user_input, generated_recipe):
+    # When "Generate" is clicked, generate recipe
+    generated_recipe.value = "Generating recipe..."
+    # Now call the generate_recipe function to process the input and update the result
+    result = generate_recipe(user_input)
+    generated_recipe.value = result[generated_recipe]["value"]
+    return generated_recipe
+
+with gr.Blocks(css="""
+    #chat-container {
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+    }
+    .message {
+        padding: 10px;
+        border-radius: 5px;
+    }
+    .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;
+    }
+""") 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() as column:
@@ -68,9 +94,10 @@ with gr.Blocks(css="./css/styles.css") as recipegen:
     )
 
     generate_button.click(
-        fn=generate_recipe,
-        inputs=[user_ingredients],
+        fn=on_generate_click,
+        inputs=[user_ingredients, generated_recipe],
         outputs=[generated_recipe]
     )
 
 recipegen.launch(share=True)
+