app.py

import gradio as gr

# # Define a list of word and translation pairs
word_translations = [
  {
    "word": "Hello",
    "image_url": "https://example.com/image1.jpg",
    "translation": "Hola",
    "link": "https://www.google.com/"
  },
  {
    "word": "World",
    "image_url": "https://example.com/image2.jpg",
    "translation": "Mundo",
    "link": "https://en.wikipedia.org/wiki/World"
  },
  {
    "word": "Goodbye",
    "image_url": "https://example.com/image3.jpg",
    "translation": "Adiós",
    "link": "https://en.wikipedia.org/wiki/Bat"
  }
]

# 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)
    display_html = f"Word: {word_translation['word']}<br>" 
    display_html += f"Translation: {word_translation['translation']}<br>"
    display_html += f"<br><img src='{word_translation['image_url']}' width='200'><br>"
    display_html += f"<br><iframe src='{word_translation['link']}' width=\'100%\' height=\'500px\'></iframe>" 
    return display_html
    
# 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()