# 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

# 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']

# 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()