{"id":20619898,"url":"https://github.com/mafda/ml_with_fastapi_and_streamlit","last_synced_at":"2025-04-15T12:13:08.394Z","repository":{"id":212875588,"uuid":"493458599","full_name":"mafda/ml_with_fastapi_and_streamlit","owner":"mafda","description":"Prototyping a Machine Learning Application with Streamlit, FastAPI, Hugging Face and Docker","archived":false,"fork":false,"pushed_at":"2023-04-12T13:57:30.000Z","size":33518,"stargazers_count":21,"open_issues_count":0,"forks_count":6,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T12:12:34.713Z","etag":null,"topics":["classification-model","data-science","data-visualization","docker","docker-compose","dockerfile","fastapi","huggingface","machine-learning","ml-app","mnist-classification","pretrained-models","streamlit","streamlit-application"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mafda.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-18T00:47:06.000Z","updated_at":"2025-02-23T04:43:17.000Z","dependencies_parsed_at":null,"dependency_job_id":"27a3045d-7ae5-4fa9-b031-89c8997fb5d1","html_url":"https://github.com/mafda/ml_with_fastapi_and_streamlit","commit_stats":null,"previous_names":["mafda/ml_with_fastapi_and_streamlit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mafda%2Fml_with_fastapi_and_streamlit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mafda%2Fml_with_fastapi_and_streamlit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mafda%2Fml_with_fastapi_and_streamlit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mafda%2Fml_with_fastapi_and_streamlit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mafda","download_url":"https://codeload.github.com/mafda/ml_with_fastapi_and_streamlit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249067779,"owners_count":21207396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["classification-model","data-science","data-visualization","docker","docker-compose","dockerfile","fastapi","huggingface","machine-learning","ml-app","mnist-classification","pretrained-models","streamlit","streamlit-application"],"created_at":"2024-11-16T12:12:46.931Z","updated_at":"2025-04-15T12:13:08.388Z","avatar_url":"https://github.com/mafda.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Prototyping a ML Application with Streamlit, FastAPI and Hugging Face\n\n- [Prototyping a ML Application with Streamlit, FastAPI and Hugging Face](#prototyping-a-ml-application-with-streamlit-fastapi-and-hugging-face)\n  - [What is Prototyping?](#what-is-prototyping)\n    - [Prototyping Tools](#prototyping-tools)\n  - [What is Streamlit?](#what-is-streamlit)\n    - [Why use Streamlit?](#why-use-streamlit)\n    - [How does it Work?](#how-does-it-work)\n  - [What is FastAPI?](#what-is-fastapi)\n  - [What is Hugging Face?](#what-is-hugging-face)\n  - [Example ML-App](#example-ml-app)\n    - [Architecture](#architecture)\n    - [Project Setup](#project-setup)\n  - [Results](#results)\n  - [Basic version (Only Streamlit)](#basic-version-only-streamlit)\n  - [Tools](#tools)\n\n![Handwritten digits recognition](assets/handwritten-digits-recognition.png)\n\nDuring the development process of data science projects, we always need to\npresent the results of our findings at certain times. And we sometimes may have\ndoubts about what would be the best way to show these results. \n\nThen, this is where tools like Streamlit, FastAPI and Hugging Face emerge as a quick way to expose\nfunctional results and don't need complex implementations. \n\n## What is Prototyping?\n\n[Prototyping](https://www.interaction-design.org/literature/topics/prototyping)\nis a process for developing an idea, and it is used in different areas to test\nor simulate it before launching.\n\n* A [prototype](https://en.wikipedia.org/wiki/Prototype) is a version of what\n  the product will be.\n* Prototyping is the iterative process of idea development.\n\n\u003e \"So, we will have some **prototypes** of an idea in the **prototyping**\n\u003e process.\"\n\nPrototyping is a fundamental step for any product, idea, or service type because\nit allows:\n\n* development of an initial version,\n* discovery of flaws, \n* reduction in costs,\n* knowledge of the users' experience,\n* testing of features, and\n* also, generation of [POCs](https://en.wikipedia.org/wiki/Proof-of-concept) or\n  [MVPs](https://en.wikipedia.org/wiki/Minimum_viable_product) of the idea.\n\n### Prototyping Tools\n\nThere are different tools according to the level of fidelity or similarity\nbetween the idea and the final product. These levels can vary according to their\nconcept, aesthetic, and function.\n\n* **Low-fidelity** prototyping is a paper draft of the idea.\n* **Mid-fidelity** prototyping can be produced in software as a mockup,\n  replicating some fundamental functionalities of the idea. Some tools for\n  prototyping are [Figma](https://www.figma.com),\n  [Sketch](https://www.sketch.com), [Miro](https://miro.com), and \n  [InVision](https://www.invisionapp.com).\n* **High-fidelity** prototype may include some level of programming to replicate\n  the final solution behavior fluidly.\n  [Flask](https://flask.palletsprojects.com/en/2.1.x/) and\n  [Streamlit](https://streamlit.io) are a couple of tools.\n\n## What is Streamlit?\n\n[Streamlit](https://streamlit.io) is a free, open-source, all-Python framework.\nIt enables data scientists to quickly build interactive dashboards and machine\nlearning web apps, without requiring front-end web development experience.\n\nThis framework has gained [attention and\npopularity](https://www.datarevenue.com/en-blog/data-dashboarding-streamlit-vs-dash-vs-shiny-vs-voila)\namong data scientists and machine learning programmers in recent years. Its\ngrowth is due to the fact that it:\n\n* is an easy-to-use tool,\n* needs basic knowledge of Python, and\n* is **compatible with frameworks** such as:\n  * Machine Learning: TensorFlow, PyTorch, Scikit-learn,\n  * Visualization libraries: Seaborn, Altair, Plotly, and\n  * Others.\n\n### How does it Work?\n\n1. [Install\n   Streamlit](https://docs.streamlit.io/library/get-started/installation). I\n   recommend you use **Conda and set up your environment**, but you can use:\n\n    ```shell\n    pip install streamlit\n    ```\n\n2. [Create](https://docs.streamlit.io/library/get-started/create-an-app) a new\n   Python script and import Streamlit with a few Streamlit commands:\n\n    ```shell\n    import streamlit as st\n    ```\n\n3. [Run](https://docs.streamlit.io/library/get-started/main-concepts) it:\n\n    ```shell\n    streamlit run your_script.py\n    ```\n\n    As soon as you run the script, a local Streamlit server will spin up, and\n    your app will open in a new tab in your default web browser.\n\n    Or you can navigate to `http://localhost:8501`.\n\n## What is FastAPI? \n\n[FastAPI](https://fastapi.tiangolo.com) is a modern, fast (high-performance) web framework for building APIs with Python. It is based on standard Python type hints, which allows for automatic data validation, serialization, and documentation generation. \n\nFastAPI is designed to be easy to use and highly efficient, providing features such as asynchronous support, dependency injection, and automatic generation of OpenAPI and JSON Schema documentation.\n\n It has gained popularity in the Python community due to its ease of use, performance, and developer-friendly features.\n\n## What is Hugging Face? \n\n[Hugging Face](https://huggingface.co) is a company and an open-source community that focuses on natural language processing (NLP) and machine learning. \n\nHugging Face provides a wide range of tools, libraries, and resources that are widely used by researchers, developers, and data scientists for building, training, and deploying NLP models.\n\n## Example ML-App\n\nI used a pretrained [ViT](https://huggingface.co/farleyknight-org-username/vit-base-mnist) model for image classification. This model is a fine-tuned version of [google/vit-base-patch16-224-in21k](https://huggingface.co/google/vit-base-patch16-224-in21k) on the [mnist](http://yann.lecun.com/exdb/mnist/) dataset.\n\n### Architecture\n\n![streamlit with fastapi](assets/streamlit-fastapi.png)\n\n### Project Setup\n\n- Clone this repository\n\n```shell\n(base)$: git clone git@github.com:mafda/ml_with_fastapi_and_streamlit.git\n(base)$: cd ml_with_fastapi_and_streamlit\n```\n\n- Run the applications\n\n```shell\n$ docker-compose up\n```\n\n- And go to [http://localhost:8501](http://localhost:8501)\n\n## Results\n\n![streamlit app - mnist](assets/mnist-prediction.gif)\n\n\n## Basic version (Only Streamlit)\n\n- Change the branch\n\n```shell\n(base)$: git checkout streamlit-basic\n```\n\n- Create the conda environment\n\n```shell\n(base)$: conda env create -f environment.yml\n```\n\n- Activate the environment\n\n```shell\n(base)$: conda activate ml-app\n```\n\n- Run\n\n```shell\n(ml-app)$: streamlit run src/app.py\n```\n\n- And go to [http://localhost:8501](http://localhost:8501)\n\n## Conclusions\n\nStreamlit, FastAPI and Hugging Face could be seen as an opportunity in situations like:\n\n* **prototyping** quickly,\n* creating **MVP**,\n* putting an application into production in a few weeks, and\n* sharing a link with the client or user of the system that is being developed.\n\nSo, I think it could be a good option when you want to get a\n[prototype](https://www.datarevenue.com/en-blog/data-dashboarding-streamlit-vs-dash-vs-shiny-vs-voila)\nof your dashboard/web app up and **run it as quickly as possible**.\n\n## Tools\n\n- [FastAPI](https://fastapi.tiangolo.com)\n- [Hugging Face](https://huggingface.co)\n- [Streamlit](https://streamlit.io)\n- [streamlit-drawable-canvas](https://pypi.org/project/streamlit-drawable-canvas/)\n\n---\n\nmade with 💙 by [mafda](https://mafda.github.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmafda%2Fml_with_fastapi_and_streamlit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmafda%2Fml_with_fastapi_and_streamlit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmafda%2Fml_with_fastapi_and_streamlit/lists"}