Update app.py

app.py

@@ -1,33 +1,125 @@
+# import gradio as gr
+
+# # Define a list of word and translation pairs
+# word_translations = [
+#     {"word": "Hello", "translation": "Hola"},
+#     {"word": "Goodbye", "translation": "Adiós"},
+#     {"word": "Thank you", "translation": "Gracias"},
+#     {"word": "Please", "translation": "Por favor"}
+# ]
+
+# # Initialize an index to keep track of the current word
+# current_index = 0
+
+# # Function to display the current word and translation
+# def display_word():
+#     global current_index
+#     word_translation = word_translations[current_index]
+#     current_index = (current_index + 1) % len(word_translations)
+#     return f"Word: {word_translation['word']}<br>Translation: {word_translation['translation']}"
+
+# # Create a Gradio interface
+# iface = gr.Interface(
+#     fn=display_word,
+#     live=True,
+#     title="Word Translation App",
+#     description="Click 'Next' to view the next word and translation.",
+#     inputs=[],
+#     outputs=["html"],
+#     layout="vertical"
+# )
+
+# # Start the Gradio interface
+# iface.launch()
+
+# import gradio as gr
+# import random
+
+# # Define your list of words and their translations
+# word_translations = [
+#     {"word": "Apple", "translation": "Manzana", "image_url": "apple_image.jpg"},
+#     {"word": "Banana", "translation": "Plátano", "image_url": "banana_image.jpg"},
+#     {"word": "Orange", "translation": "Naranja", "image_url": "orange_image.jpg"},
+#     # Add more words and translations as needed
+# ]
+
+# # Initialize a variable to keep track of the current word index
+# current_word_index = 0
+
+# # Define a function to display the current word and translation
+# def display_word():
+#     word_info = word_translations[current_word_index]
+#     word = word_info["word"]
+#     translation = word_info["translation"]
+#     image_url = word_info["image_url"]
+#     return f"Word: {word}<br>Translation: {translation}<br><img src='{image_url}' width='200'>"
+
+# # Define a function to handle the "Next" button click
+# def next_word():
+#     global current_word_index
+#     current_word_index = (current_word_index + 1) % len(word_translations)
+#     return display_word()
+
+# # Create a Gradio interface
+# iface = gr.Interface(
+#     fn=display_word,
+#     live=True,
+#     title="Word Translation App",
+#     description="Click 'Next' to view the next word and translation.",
+#     inputs=[],
+#     outputs="html",
+#     layout="vertical",
+#     wide=True
+# )
+
+# # Add a "Next" button to the interface
+# iface.add_button("Next", next_word)
+
+# # Launch the Gradio interface
+# iface.launch()
+
 import gradio as gr
+import random
 
-# Define a list of word and translation pairs
-word_translations = [
-    {"word": "Hello", "translation": "Hola"},
-    {"word": "Goodbye", "translation": "Adiós"},
-    {"word": "Thank you", "translation": "Gracias"},
-    {"word": "Please", "translation": "Por favor"}
+# 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'
+    }
 ]
 
-# Initialize an index to keep track of the current word
-current_index = 0
-
-# Function to display the current word and translation
-def display_word():
-    global current_index
-    word_translation = word_translations[current_index]
-    current_index = (current_index + 1) % len(word_translations)
-    return f"Word: {word_translation['word']}<br>Translation: {word_translation['translation']}"
+# 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']
 
 # Create a Gradio interface
 iface = gr.Interface(
-    fn=display_word,
-    live=True,
-    title="Word Translation App",
-    description="Click 'Next' to view the next word and translation.",
-    inputs=[],
-    outputs=["html"],
-    layout="vertical"
+    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"
 )
 
-# Start the Gradio interface
 iface.launch()
+