Nested Button problem

[smit_Shah]

Hello people of the community! I am new to streamlit and want to develop a web app that is similar to Tinder application. First of all, the user will have to select the gender and then click on the ‘Find’ button and an image will be displayed. As soon as you clicked on button, two new buttons will be displayed i.e. ‘Like’ and ‘Dislike’. Now, the purpose of the ‘Like’ button is to show the similar image i.e. if a man is having black hair, then till the user is pressing the like button, he will be displayed man with black hair. If the user press dislike button, he will be displayed random image either gender with black, blonde or bald hair.

My corresponding code is here:

from tkinter import CENTER
import streamlit as st
import numpy as np
import pandas as pd
import os
import matplotlib.pyplot as plt
import random
import cv2
from PIL import Image


file_path = os.listdir("D:/2.Masters/Sem_4/EV/Projects/Tinder_Project/Data/")

def user_input():
    st.title("Tinder Application")
    st.write("""### This is the other basic model of the Tinder Application""")
    gender = st.selectbox('Pick your gender', ['Male', 'Female'])
    
    men = []
    women = []

    for images in file_path:
        if 'female' in images:
            women.append(images)
        elif 'male' in images:
            men.append(images)

    if gender == 'Male':
        name = random.choice(men)

    elif gender == 'Female':
        name = random.choice(women)

    return name, gender

def find(name):
    image = cv2.imread('D:/2.Masters/Sem_4/EV/Projects/Tinder_Project/Data/' + name)
    image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)

    return image

def like(gender, name):

    men_black_hair = []
    women_black_hair = []
    men_no_hair = []
    women_blonde_hair = []
    men_blonde_hair = []

    for images in file_path:
        if 'female_black_hair' in images:
            women_black_hair.append(images)
        elif 'male_black_hair' in images:
            men_black_hair.append(images)
        elif 'female_blonde_hair' in images:
            women_blonde_hair.append(images)
        elif 'male_no_hair' in images:
            men_no_hair.append(images)
        elif 'male_blonde_hair' in images:
            men_blonde_hair.append(images)

    if gender == 'Male' and 'black' in name:
                name = random.choice(men_black_hair)

    elif gender == 'Male' and 'blonde' in name:
        name = random.choice(men_no_hair)

    elif gender == 'Male' and 'no' in name:
        name = random.choice(men_blonde_hair)

    elif gender == 'Female' and 'black' in name:
        name = random.choice(women_black_hair)

    elif gender == 'Female' and 'blonde' in name:
        name = random.choice(women_blonde_hair)

    like_image = cv2.imread('D:/2.Masters/Sem_4/EV/Projects/Tinder_Project/Data/' + name)
    like_image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)

    return image

def dislike(name):
    image = find(name)
    
    return image


def display(image):
    if st.button('Find'):
        col1, col2, col3 = st.columns([1,1,1])
        with col1:
           like = st.button('Like')
        with col3:
           dislike =  st.button('Dislike')
        if like:
            image = like(image)
        elif dislike:
            image = dislike(image)
        
        st.image(image)

name, gender = user_input()
image = find(name)
display(image)

The problem is that the images are not displayed after clicking on Like or Dislike button. In fact, everything reruns from top to bottom.
I know the solution is to use state_session and callbacks, but I don’t know how to implement that. Any help would be appreciable!

[Caroline]

Hi @smit_Shah,

Thanks for posting!

Have you read through the session state documentation?

To start out using session state to implement this, you could decide on some variables to reflect what actions the user has taken. For example, you can store something like st.session_state['brown_hair'] = 'liked'; when you want to check if the user has “liked” brown hair, you can check if 'liked' in st.session_state['brown_hair']

Caroline

[smit_Shah]

Yes I read the documentation, I got the idea about implementation, but while implementing it in the script it is bit confusing. It would be great, if you could code the session_state.
And thanks for the explanation.

[Caroline]

Hi @smit_Shah,

Can you share what you’ve written so far to implement it? That would help us point you in the right direction!

Caroline

[smit_Shah]

Hi @Caroline,

First function I have created is to get the user input for gender i.e. Male or Female. Once, the user select the gender male, the function will randomly return the name (name of the image like male_black_hair_001) and image of that. Second function is find, so when the user will click on find button, this function will be called and display the image. Once, user clicked on find, two more buttons will be showed (nested buttons) i.e. Like and Dislike. If user clicked on the Like button, so that like function will generate similar images like male_black_hair_002 (since the hair is the feature) and will display same featured images until the user clicked on Dislike button. When the dislike button is pressed, this loop is over and again randomly display the image like male_black_hair or male_blonde_hair or male_no_hair. I hope that you understand!