from turtle import color, onclick
import streamlit as st
from PIL import Image, ImageOps
import glob
import json
import requests
import random
import io
import streamlit.components.v1 as components


def sample():
    img_set = random.sample(list(set2ids.keys()),1)[0]

prefix = 'https://raw.githubusercontent.com/BennoKrojer/imagecode-val-set/main/image-sets-val/'
set2ids = json.load(open('set2ids.json', 'r'))
descriptions = json.load(open('valid_data.json', 'r'))
img_set = 'YouCook-video0034-shot13_0'
descr = list(descriptions[img_set].values())[0]


st.set_page_config(layout="wide")
col1, col2 = st.columns(2)

images = [prefix+'/'+img_set+'/'+i for i in set2ids[img_set]]

col1.subheader(descr)
sample_button = col1.button('Sample set of images with contextual description')

if sample_button:
    img_set = random.sample(list(set2ids.keys()),1)[0]    

index= int(col1.number_input('Image Index from 0 to 9', value=0, min_value=0, max_value=len(images)-1))
components.html(
    """
<script>
const elements = window.parent.document.querySelectorAll('.stNumberInput div[data-baseweb="input"] > div')
console.log(elements)
elements[1].style.backgroundColor = 'red'
</script>
""",
    height=0,
    width=0,
)


img = images[index]
images[index] = ImageOps.expand(Image.open(io.BytesIO(requests.get(images[index], stream=True).content)),border=10,fill='blue')

col1.image(img, use_column_width=True)
caps = list(range(10))
col2.image(images, width=175, caption=caps)