Update app.py

app.py

@@ -79,47 +79,63 @@
 # iface.launch()
 
 import gradio as gr
-import random
-
-# Sample data
-data = [
-    {
-        'word': 'Apple',
-        'image_url': 'https://example.com/apple.jpg',
-        'translation': 'Manzana',
-        'website_link': 'https://en.wikipedia.org/wiki/Apple'
-    },
-    {
-        'word': 'Banana',
-        'image_url': 'https://example.com/banana.jpg',
-        'translation': 'Plátano',
-        'website_link': 'https://en.wikipedia.org/wiki/Banana'
-    },
-    {
-        'word': 'Cherry',
-        'image_url': 'https://example.com/cherry.jpg',
-        'translation': 'Cereza',
-        'website_link': 'https://en.wikipedia.org/wiki/Cherry'
-    }
-]
-
-# Function to display data for a given index
-def display_data(index):
-    word_data = data[index]
-    return f"Word: {word_data['word']}\nTranslation: {word_data['translation']}", word_data['image_url'], word_data['website_link']
+import requests
+from PIL import Image
+
+def display_item(index, list_of_items):
+  """Displays a single item from a list of items.
+
+  Args:
+    index: The index of the item to display.
+    list_of_items: A list of Python dictionaries, where each dictionary has the following keys:
+      * text: The text.
+      * image_url: The URL of the image.
+      * translation: The translation of the text.
+      * link: The URL of the website link.
+  """
+
+  # Get the item from the list of items
+  item = list_of_items[index]
+
+  # Display the text
+  gr.Text(item["text"])
+
+  # Display the image
+  image = Image.open(requests.get(item["image_url"], stream=True).raw)
+  gr.Image(image)
+
+  # Display the translation
+  gr.Text(item["translation"])
+
+  # Display the website link
+  gr.Button("View website", onclick=lambda: gr.HTML(f"<iframe src='{item['link']}' width='100%' height='500px'></iframe>"))
+
+# Define a function to show the next item
+def show_next_item(index, list_of_items):
+  """Shows the next item in the list of items.
+
+  Args:
+    index: The current index.
+    list_of_items: A list of Python dictionaries, where each dictionary has the following keys:
+      * text: The text.
+      * image_url: The URL of the image.
+      * translation: The translation of the text.
+      * link: The URL of the website link.
+  """
+
+  # Increment the index
+  index += 1
+
+  # If the index is greater than the length of the list of items, then reset the index to 0
+  if index >= len(list_of_items):
+    index = 0
+
+  # Display the next item
+  display_item(index, list_of_items)
 
 # Create a Gradio interface
-iface = gr.Interface(
-    display_data, 
-    [
-        gr.component(label="Word and Translation", type="text", name="word_translation"),
-        gr.component(label="Image", type="image", name="image"),
-        gr.component(label="Website Link", type="text", name="website_link"),
-    ],
-    live=False,  # To avoid auto-refresh when input changes
-    examples=[(0,), (1,), (2,)],  # Provide initial examples
-    title="Word Display App"
-)
-
-iface.launch()
+interface = gr.Interface(display_item, inputs=["number", "list"], outputs="html")
+
+# Launch the Gradio interface
+interface.launch(index=0, list_of_items=list_of_items, show_next_item=show_next_item)