fixed UI

app.py

@@ -18,16 +18,9 @@ def fetch_movie_info():
             box_office = movie_data.get("BoxOffice", "N/A")
             genre = movie_data.get("Genre", "N/A")
             
-            return (
-                f"**Title:** {title}\n"
-                f"**Year:** {year}\n"
-                f"**Genre:** {genre}\n"
-                f"**Plot:** {plot}\n"
-                f"**IMDb Rating:** {imdb_rating}/10\n"
-                f"**Box Office:** {box_office}\n"
-            )
+            return title, year, genre, plot, imdb_rating, box_office
         else:
-            return f"Error: {movie_data.get('Error', 'Movie not found.')}"
+            return "Error", "Error", "Error", "Error", "Error", "Error"
     else:
         return f"Failed to fetch movie details. HTTP Status Code: {response.status_code}"
 
@@ -37,10 +30,16 @@ with gr.Blocks(css="styles.css") as app:
     gr.Markdown(
         "This app automatically fetches and displays information about the movie: *The Secret in Their Eyes*."
     )
-    output = gr.Textbox(
-        label="Movie Details", 
-        lines=10, 
-        value=fetch_movie_info()  # Assign fetched movie details directly
-    )
+    
+    # Fetch movie details and display in separate elements
+    title_output = gr.Textbox(label="Title", lines=1, value=fetch_movie_info()[0])
+    year_output = gr.Textbox(label="Year", lines=1, value=fetch_movie_info()[1])
+    genre_output = gr.Textbox(label="Genre", lines=1, value=fetch_movie_info()[2])
+    plot_output = gr.Textbox(label="Plot", lines=5, value=fetch_movie_info()[3])
+    imdb_rating_output = gr.Textbox(label="IMDb Rating", lines=1, value=fetch_movie_info()[4])
+    box_office_output = gr.Textbox(label="Box Office", lines=1, value=fetch_movie_info()[5])
+
+    # Adding a slider
+    slider = gr.Slider(minimum=0, maximum=10, step=0.25, label="Rating Slider")
 
 app.launch()