app.py

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