Git Product home page Git Product logo

multi-page-app's Introduction

multi-page-app

Watch the tutorial video

How to Make a Multi-Page Web App | Streamlit #16

How to Make a Multi-Page Web App | Streamlit #16

Demo

Launch the web app:

Streamlit App

Reproducing this web app

To recreate this web app on your own computer, do the following.

Create conda environment

Firstly, we will create a conda environment called multipage

conda create -n multipage python=3.7.9

Secondly, we will login to the multipage environement

conda activate multipage

Install prerequisite libraries

Download requirements.txt file

wget https://raw.githubusercontent.com/dataprofessor/ml-auto-app/main/requirements.txt

Pip install libraries

pip install -r requirements.txt

Download and unzip this repo

Download this repo and unzip as your working directory.

Launch the app

streamlit run app.py

multi-page-app's People

Contributors

dataprofessor avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

multi-page-app's Issues

[question] Creating dynamic pages

Hi, I'm trying to create dynamic pages, but there's hiccup. Each time I select a value from the drop down list the whole session re-runs and the subsequent page does not load. Let me break it down.

  1. I'm taking a number as an input n.
    image

  2. On clicking next it creates n modules and adds them to the list.
    image

  3. But when I select, say Member 2 from the list, the session re-runs and I'm left with the first image ๐Ÿ‘†๐Ÿป. The page against Member 2 does not load.

app.py

f_name = st.sidebar.text_input("Family Name")
number_of_members = st.sidebar.number_input(
    label="Enter number of family members: ", key="mem_num", min_value=1, max_value=20)

nxt_btn = st.sidebar.button("Next")

if nxt_btn:
    modules = []
    app = MultiApp()

    recreate(pages_path=dst_dir)
    for idx in range(number_of_members):
        shutil.copy(src=src_dir + "/memberX.py",
                    dst=dst_dir + f"/member{idx+1}.py")
        try:
            modules.append(importlib.import_module(
                name=f"pages.member{idx+1}"))
        except ModuleNotFoundError:
            logger.error(f"Abort! Module {idx+1} not found!")

        app.add_app(f"Member {idx+1}", modules[idx].app)

    # The main app
    app.run()

multiapp.py

import streamlit as st


class MultiApp:
    def __init__(self):
        self.all_apps = []

    def add_app(self, title, func):
        self.all_apps.append({
            "title": title,
            "function": func
        })

    def run(self):
        app = st.sidebar.selectbox(
            'Navigation',
            self.all_apps,
            format_func=lambda app: app['title'])
        app['function']()

Can you please show me where am I going wrong?

Multiple Identical `st.selectbox` widgets with...

A bug that happened occaisionally in multiapp.py gave error in widgets.py

widgets.py", line 148, in register_widget
    raise DuplicateWidgetID(
streamlit.errors.DuplicateWidgetID: There are multiple identical `st.selectbox` widgets with the
same generated key.

Solved it by importing random and adding key=str(random.getrandbits(32)) as shown below.

    def run(self): # test
        count = 0
        count += 1
        app = st.sidebar.selectbox(
            'Navigation',
            self.apps,
            format_func=lambda app: app['title'],
            key=str(random.getrandbits(32))
        )

the above makes the navbar unusable so I'm still stuck with

I tried to find out how to reproduce but it seemed to happen randomly when autorun on save was on so I'll leave that to another if they get the same thing

/streamlit/util.py", line 129, in index_
    raise ValueError("{} is not in iterable".format(str(x)))
ValueError: {'title': 'Test', 'function': <function app at 0x7f46984b0310>} is not in iterable

Which only occurs after saving a file then rerunning the page

The issue is the lambda function:

            format_func=lambda app: app['title']

When you save the file and update the page, each "app" is re-saved as a new object file within python (like an instance)

The lambda function looks for the previous object instance instead of the one updated in self.apps. I've no idea how to fix this

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.