Streamlit to Gradio Conversion

🔒 Gradio
1

I have a prototype working well with streamlit.
Try here by uploading oncce and you enter a loop where the multiplayer aspect is refreshed every 20 seconds.

Now I am interested in how to easily convert streamlit programs to gradio programs. Any tips?

Sample convert starter:

#import streamlit as st
import gradio as gr
import os
import csv
import time

uploaded_images = {'characters': {}, 'terrain': {}}

def get_image_path(img, name, image_type):
    file_path = f"data/uploadedImages/{image_type}/{name}/{img.name}"
    os.makedirs(os.path.dirname(file_path), exist_ok=True)
    with open(file_path, "wb") as img_file:
        img_file.write(img.getbuffer())
    return file_path

def update_csv_file(uploaded_file, name, image_type):
    csv_file_path = "Resources.csv"
    with open(csv_file_path, mode='a', newline='') as csv_file:
        csv_writer = csv.writer(csv_file)
        csv_writer.writerow([name, uploaded_file.name, image_type])

def get_uploaded_files_info():
    csv_file_path = "Resources.csv"
    with open(csv_file_path, mode='r') as csv_file:
        csv_reader = csv.reader(csv_file)
        files_info = []
        for row in csv_reader:
            files_info.append(row)
        return files_info

def display_images_from_csv():
    files_info = get_uploaded_files_info()
    for row in files_info:
        if row[2] == 'characters':
            img_path = f"data/uploadedImages/{row[2]}/{row[0]}/{row[1]}"
            st.sidebar.image(img_path, width=100, caption=row[0])
        else:
            img_path = f"data/uploadedImages/{row[2]}/{row[0]}/{row[1]}"
            st.image(img_path, width=100, caption=row[0])


# Rewrite for gradio
image_type = gr.selectbox('Choose image type:', options=['characters', 'terrain'])
name = gr.text_input('Enter a name for the image:')
uploaded_files = gr.file_uploader('Upload image(s)', type=['png', 'jpg'], accept_multiple_files=True)



for uploaded_file in uploaded_files:
    if uploaded_file is not None:
        # Get actual image file
        bytes_data = get_image_path(uploaded_file, name, image_type)
        uploaded_images[image_type].setdefault(name, [])
        uploaded_images[image_type][name].append(bytes_data)

        # Rewrite for gradio
        gr.image(bytes_data, use_column_width=True)
        
        update_csv_file(uploaded_file, name, image_type)

if image_type == 'characters':
    if uploaded_images['characters']:

        # Rewrite for gradio
        gr.sidebar.write('**Characters**')
        for name, files in uploaded_images['characters'].items():
            for file in files:

                # Rewrite for gradio
                gr.sidebar.image(file, width=100, caption=name)
else:
    if uploaded_images['terrain']:
        st.write('**Terrain**')
        row = []
        for name, files in uploaded_images['terrain'].items():
            for file in files:
                row.append(file)
                if len(row) == 3:

                    # Rewrite for gradio
                    gr.image(row, width=100 * 3)
                    row = []
        if row:

            # Rewrite for gradio
            gr.image(row, width=100 * len(row)) # Last row, if not complete

while True:
    time.sleep(20)

    # Rewrite for gradio
    gr.empty()
    
    display_images_from_csv()
1 Like