updated streamlit and requirements

Metadata_Country_API_Download_DS2_en_csv_v2_5657328.csv

@@ -1,9 +0,0 @@
-"Country Code","Region","IncomeGroup","SpecialNotes","TableName",
-"COD","Sub-Saharan Africa","Low income","The World Bank systematically assesses the appropriateness of official exchange rates as conversion factors. In this country, multiple or dual exchange rate activity exists and must be accounted for appropriately in underlying statistics. An alternative estimate (“alternative conversion factor” - PA.NUS.ATLS) is thus calculated as a weighted average of the different exchange rates in use in the country. Doing so better reflects economic reality and leads to more accurate cross-country comparisons and country classifications by income level. For this country, this applies to the period 1999-2004. Alternative conversion factors are used in the Atlas methodology and elsewhere in World Development Indicators as single-year conversion factors.","Congo, Dem. Rep.",
-"GHA","Sub-Saharan Africa","Lower middle income","The World Bank systematically assesses the appropriateness of official exchange rates as conversion factors. In this country, multiple or dual exchange rate activity exists and must be accounted for appropriately in underlying statistics. An alternative estimate (“alternative conversion factor” - PA.NUS.ATLS) is thus calculated as a weighted average of the different exchange rates in use in the country. Doing so better reflects economic reality and leads to more accurate cross-country comparisons and country classifications by income level. For this country, this applies to the period 1974-1987. Alternative conversion factors are used in the Atlas methodology and elsewhere in World Development Indicators as single-year conversion factors.","Ghana",
-"KEN","Sub-Saharan Africa","Lower middle income","Fiscal year end: June 30; reporting period for national accounts data: CY.","Kenya",
-"NGA","Sub-Saharan Africa","Lower middle income","The World Bank systematically assesses the appropriateness of official exchange rates as conversion factors. In this country, multiple or dual exchange rate activity exists and must be accounted for appropriately in underlying statistics. An alternative estimate (“alternative conversion factor” - PA.NUS.ATLS) is thus calculated as a weighted average of the different exchange rates in use in the country. Doing so better reflects economic reality and leads to more accurate cross-country comparisons and country classifications by income level. For this country, this applies to 1970-2020. Alternative conversion factors are used in the Atlas methodology and elsewhere in World Development Indicators as single-year conversion factors.","Nigeria",
-"ZAF","Sub-Saharan Africa","Upper middle income","Fiscal year end: March 31; reporting period for national accounts data: CY.","South Africa",
-"ZWE","Sub-Saharan Africa","Lower middle income","National Accounts data are reported in Zimbabwean Dollar (ZWL). Before 2017, one ZWL is set to be equal to one USD.
-
-The World Bank systematically assesses the appropriateness of official exchange rates as conversion factors. In this country, multiple or dual exchange rate activity exists and must be accounted for appropriately in underlying statistics. An alternative estimate (“alternative conversion factor” - PA.NUS.ATLS) is thus calculated as a weighted average of the different exchange rates in use in the country. Doing so better reflects economic reality and leads to more accurate cross-country comparisons and country classifications by income level. For this country, this applies to the period 2017-2022. Alternative conversion factors are used in the Atlas methodology and elsewhere in World Development Indicators as single-year conversion factors.","Zimbabwe",

challenge.md

@@ -1,14 +0,0 @@
-# Learning Challenge
-
-- Add the ability to filter the chart to a specified year range with [st.date_input()](https://docs.streamlit.io/develop/api-reference/widgets/st.date_input)
-- Add [Dataframes - st.data_editor()](https://docs.streamlit.io/develop/concepts/design/dataframes) to allow the user to pick which variables are displayed in the drop down.
-- Add a few metrics to your dashboard using [st.metric()](https://docs.streamlit.io/develop/api-reference/data/st.metric)
-  - Report the year range of data available for the variable selected over all countries
-  - Add the percent growth from 2000 to the latest available year
-  - Add the country with the highest value in the latest year.
-- Give the user of your app the ability to take a picture using [st.camera_input()](https://docs.streamlit.io/develop/api-reference/widgets/st.camera_input).
-- Try to use a third party extension to allow the user to draw on the camera picture taken using [streamlit-drawable-canvas](https://github.com/andfanilo/streamlit-drawable-canvas?tab=readme-ov-file).
-- Now organize your application using
-  - [st.set_page_config()](https://docs.streamlit.io/develop/api-reference/configuration/st.set_page_config)
-  - [st.columns()](https://docs.streamlit.io/develop/api-reference/layout/st.columns)
-  

dat_munged.csv

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:afc45ef4e1dd519b46ef23416f0f656148b469e96b744cb8ebe88add1f3a5980
-size 27673782

remark_slides.md

@@ -1,10 +0,0 @@
-# GitHub Pages Slideshow with [Remark](https://github.com/gnab/remark)
-
-This template is made from [Remark](https://github.com/gnab/remark), an open source tool to help create and display slideshows from markdown. For questions, see [Remark's documentation](https://github.com/gnab/remark). I have added a Github action to convert the slides to a pdf in the `slides` branch.
-
-The most important things to know are:
-- Edit the `slides.html` file to edit the slides
-- Slides are separated by `----`
-- Presenter notes after `???` within one slide
-- Toggle presenter notes during presentation with `P`
-- Read the full guide to [remark markdown](https://github.com/gnab/remark/wiki)

requirements.txt

@@ -1,7 +1,6 @@
-altair
-polars
 pandas
 streamlit
-scikit-learn
 numpy
-plotly
+plotly
+tensorflow
+keras

slides.html

@@ -1,304 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>Introduction to Data Science Programming in Python</title>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-    <style type="text/css">
-      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
-      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
-      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
-
-      body { font-family: 'Droid Serif'; }
-      h1 {
-        font-family: 'Yanone Kaffeesatz';
-        font-weight: normal;
-        color:darkslategrey;
-      }
-      h2, h3 {
-        font-family: 'Yanone Kaffeesatz';
-        font-weight: normal;
-      }
-      .font40 {
-        font-size: 40px;
-      }
-      .font30 {
-        font-size: 30px;
-      }
-      .font20 {
-        font-size: 20px;
-      }
-      .remark-code, .remark-inline-code {
-         font-family: 'Ubuntu Mono';
-         font-size: 20px;
-         }
-            /* Two-column layout */
-      .left-column {
-        color: #777;
-        width: 50%;
-        float: left;
-      }
-      .left-column h2:last-of-type, .left-column h3:last-child {
-          color: #000;
-        }
-      .right-column {
-        width: 50%;
-        float: right;
-        padding-top: 1em;
-      }
-      .right-column h2:last-of-type, .right-column h3:last-child {
-          color: #000;
-        }
-      .inverse {
-        background: #272822;
-        color: #e4e4e1;
-        text-shadow: 0 0 20px #333;
-      }
-      .inverse h1, .inverse h2, .inverse h3 {
-        color: #f3f3f3;
-        line-height: 0.8em;
-      }
-      .lightfont {color:rgb(129, 126, 126);
-    </style>
-  </head>
-  <body>
-    <textarea id="source">
-
-class: center, middle, font30
-
-# Introduction to Streamlit Apps
-
-J. Hathaway - Data Science Program Chair (BYU-I)
-
----
-
-class: font30
-
-# Disclaimers
-
-## Dashboarding is easy to start with modern tools like Streamlit.  
-
-### It is much harder to implement as [Full-Stack Developer](https://aws.amazon.com/what-is/full-stack-development) has it's own schooling and employment. Enjoy using these tools. However, know their purpose and use them accordingly.
-
-
----
-class: font20
-# Agenda
-
-Exemplify the data science process - Extract, Transform, Load, Analyze
-
-1. Checking installations (1 minute)
-2. Creating an account and navigating Hugging Face (10 minutes)
-3. Docker for dashboard development using Streamlit (10 minutes)
-4. Polars for data munging (5 minutes). _Don't munge data in your app (unless you have to)!_
-5. What are dashboards? (5 minutes)
-6. Why Streamlit for dashboards? (10 minutes)
-7. Visualization in dashboards (5 minutes)
-8. Tables in dashboards (5 minutes)
-9. Key Performance Indicators [KPIs] in dashboards (5 minutes)
-10. Challenge yourself to some dasbhoard edits (20 minutes)
-
-
----
-class: font40
-# Checking our installation
-
-1. [Python Installed](https://www.python.org/downloads/)
-2. [VS Code Installed](https://code.visualstudio.com/download)
-3. [Python VS Code Extension Installed](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
-4. [Docker Installed](https://www.docker.com/)
-4. Python packages installed.
-      ```python
-      pip install polars plotly streamlit
-      ```
-
----
-class: font20
-# Hugging Face Accounts and Navigation
-
-## [Create your Hugging Face](https://huggingface.co/join) account.
-
-> The platform where the machine learning community collaborates on models, datasets, and applications.
-
-- [Hugging Face Docs](https://huggingface.co/docs)
-- [Hugging Face Spaces](https://huggingface.co/docs/hub/spaces) ([Youtube Intro](https://www.youtube.com/watch?v=3bSVKNKb_PY))
-- [Hugging Face Repositories](https://huggingface.co/docs/hub/repositories)
-- [Hugging Face Organizations](https://huggingface.co/docs/hub/organizations)
-
-
----
-class: font20
-# Docker for Dashboard Development
-
-.left-column[
-1. Clone our Hugging Face repository
-2. Explore the `DockerFile` and `docker-compose.yml` files.
-3. Running `Docker compose up`
-4. Editing our App
-5. Pushing our changes
-]
-.right-column[
-![:scale 65%](https://www.docker.com/wp-content/uploads/2023/08/logo-guide-logos-1.svg)
-]
----
-class: font20
-# Polars for data munging 
-
-> Polars is a lightning fast DataFrame library/in-memory query engine. Its embarrassingly parallel execution, cache efficient algorithms and expressive API makes it perfect for efficient data wrangling, data pipelines, snappy APIs and so much more. Polars is about as fast as it gets, see the results in the [H2O.ai benchmark](https://h2oai.github.io/db-benchmark/).
-> </br>
-> [Polars Website](https://www.pola.rs/)
-
-![:scale 60%](https://raw.githubusercontent.com/pola-rs/polars-static/master/logos/polars_github_logo_rect_dark_name.svg)
-
-
----
-
-class: font20
-# Introduction to Dashboarding (Structured design)
-
-> A dashboard is a way of displaying various types of visual data in one place that let's the user focus on one general topic but explore questions within that topic.
-
-
-![:scale 85%](https://huggingface.co/spaces/ds460/docker_streamlit/resolve/main/img/dashboard_vmware_balance.png)
-
----
-class: font20
-# Introduction to Dashboarding (Audience)
-
-> A dashboard is a way of displaying various types of visual data in one place that let's the user focus on one general topic but explore questions within that topic.
-
-> A poorly-designed dashboard doesn’t respect the reader’s time. The whole point of a dashboard is to create a product that will save the user’s time by including everything they need to know in one place. If they can’t go through the dashboard in a couple of minutes and get on with their job, the design needs to be changed.
-
-
-![:scale 40%](https://huggingface.co/spaces/ds460/docker_streamlit/resolve/main/img/dashboard_vmware_user.png)
-
-[Reference 1](https://www.vmwareopsguide.com/dashboards/chapter-1-design-considerations/3.1.2-the-art-of-dashboard/) and [Reference 2](https://databox.com/bad-dashboard-examples)
-
----
-
-class: font20
-# Why Streamlit for dashboards?
-
-
-Streamlit turns data scripts into shareable web apps in minutes in pure Python. A faster way to build and share data apps with no front‑end experience required.
-
-
-![:scale 60%](https://huggingface.co/spaces/ds460/docker_streamlit/resolve/main/img/streamlit.jpg)
-
----
-class: font30
-# Streamlit programming
-
-Now let's practice using Streamlit with our installation of Python
-
-__Streamlit practice (streamlit_try.py)__
-
-_After deleting your Docker Image and Container, edit your `DockerFile` to build from a new `streamlit_try.py` script that you create in the folder. Use the code below for the app._
-
-
-```python
-import streamlit as st
-import polars as pl
-
-st.write("Here's our first attempt at using data to create a table:")
-st.write(pl.DataFrame({
-    'first column': [1, 2, 3, 4],
-    'second column': [10, 20, 30, 40]
-}))
-```
-
----
-class: font20
-# Introduction to Data Visualization
-
-Our eyes are drawn to [colors and patterns](https://www.tableau.com/learn/whitepapers/tableau-visual-guidebook). We can quickly identify red from blue, and squares from circles. Our culture is visual, including everything from art and advertisements to TV and movies. Data visualization is another form of visual art that grabs our interest and keeps our eyes on the message.
-
-.left-column[
-### Advantages of data visualization:
-
-- Easily sharing information.
-- Interactively explore opportunities.
-- Visualize patterns and relationships.
-]
-.right-column[
-### Disadvantages:
-
-- Biased or inaccurate information.
-- Correlation doesn’t always mean causation.
-- Core messages can get lost in translation.
-]
-
-[Tableau Reference](https://www.tableau.com/learn/articles/data-visualization)
-
----
-class: font20
-# Introduction to __Plotly__ for Data Visualization
-
-The Plotly Python package leverages the plotly.js JavaScript library to enables Python users to create beautiful interactive web-based visualizations. Plotly.js is built on top of d3.js and stack.gl, Plotly.js is a high-level, declarative charting library. plotly.js ships with over 40 chart types, including 3D charts, statistical graphs, and SVG maps.
-
-![:scale 50%](https://raw.githubusercontent.com/hathawayj/ghana_datascience/master/img/plotly_charts.png)
-
----
-class: font20
-# Tables in dashboards
-
-> Complexity is the downfall of dashboards. Raw data is always complex.
-
-- [How to Fit Big Tables on Small Screens](https://www.youtube.com/watch?v=s7nvF1PuAWY)
-- [Examples of great tables](https://posit-dev.github.io/great-tables/examples/)
-
-![:scale 75%](https://huggingface.co/spaces/ds460/docker_streamlit/resolve/main/img/tables.jpg)
-
----
-class: font40
-# Key Performance Indicators (KPIs) in dashboards
-
-> Too much summarization and too much dashboard real estate.
-
-_[The Dark Side of KPIs: Uncovering the Limitations and Pitfalls](https://shahmm.medium.com/the-dark-side-of-kpis-uncovering-the-limitations-and-pitfalls-4139950e70ef)_
-
-![:scale 80%](https://huggingface.co/spaces/ds460/docker_streamlit/resolve/main/img/kpis.jpg)
-
----
-class: font20
-# Streamlit Challenge Activity
-
-- Add the ability to filter the chart to a specified year range with [st.date_input()](https://docs.streamlit.io/develop/api-reference/widgets/st.date_input)
-- Add [Dataframes - st.data_editor()](https://docs.streamlit.io/develop/concepts/design/dataframes) to allow the user to pick which variables are displayed in the drop down.
-- Add a few metrics to your dashboard using [st.metric()](https://docs.streamlit.io/develop/api-reference/data/st.metric)
-  - Report the year range of data available for the variable selected over all countries
-  - Add the percent growth from 2000 to the latest available year
-  - Add the country with the highest value in the latest year.
-- Give the user of your app the ability to take a picture using [st.camera_input()](https://docs.streamlit.io/develop/api-reference/widgets/st.camera_input).
-- Try to use a third party extension to allow the user to draw on the camera picture taken using [streamlit-drawable-canvas](https://github.com/andfanilo/streamlit-drawable-canvas?tab=readme-ov-file).
-- Now organize your application using
-  - [st.set_page_config()](https://docs.streamlit.io/develop/api-reference/configuration/st.set_page_config)
-  - [st.columns()](https://docs.streamlit.io/develop/api-reference/layout/st.columns)
-
-    </textarea>
-    <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript">
-    </script>
-    <script type="text/javascript">
-      remark.macros.upper = function () {
-        // `this` is the value in the parenthesis, or undefined if left out
-        return this.toUpperCase();
-      };
-
-      remark.macros.random = function () {
-        // params are passed as function arguments: ["one", "of", "these", "words"]
-        var i = Math.floor(Math.random() * arguments.length);
-        return arguments[i];
-      };
-
-      remark.macros.scale = function (percentage) {
-        var url = this;
-        return '<img src="' + url + '" style="width: ' + percentage + '" />';
-      };
-
-      var slideshow = remark.create({
-        ratio: "16:9",
-        highlightLanguage: 'javascript',
-        highlightStyle: 'monokai'
-       });
-    </script>
-  </body>
-</html>

streamlit.py

@@ -1,96 +1,35 @@
-# %%
-# packages
-import streamlit as st
-import polars as pl
+#%%
 import plotly.express as px
-import plotly.io as pio
-pio.templates.default = "simple_white"
-
-st.set_page_config(layout="wide")
-# %%
-# Data
-
-dat = pl.read_csv("dat_munged.csv")
-info = pl.read_csv("Metadata_Indicator_API_Download_DS2_en_csv_v2_5657328.csv").rename({"INDICATOR_CODE":"Indicator Code", "INDICATOR_NAME":"Indicator Name"})
-dat_vars = pl.read_csv("dat_vars.csv")
-
-# %%
-# Example Chart
-# drop_country =  ["ZAF"]
-# indicator_code = "NY.GDP.PCAP.PP.KD"
-list_name = dat_vars.select("Indicator Name").to_series().to_list()
-list_code = dat_vars.select("Indicator Code").to_series().to_list()
-list_country_code = ["ZAF", "ZWE", "KEN", "NGA", "GHA", "COD"]
-list_country_name = ["South Africa", "Zimbabwe", "Kenya", "Nigeria", "Ghana", "Congo, Dem. Rep."]
-
-
-drop_country = st.sidebar.multiselect("Remove Country (Country Code)", list_country_code)
-
-checked_var = st.sidebar.checkbox("Use Variable Name")
-
-
-if checked_var:
-    indicator_name = st.sidebar.selectbox("Select your variable", list_name)
-    indicator_code = dat_vars.filter(pl.col("Indicator Name") == indicator_name).select("Indicator Code").to_series()[0]
-else:
-    indicator_code = st.sidebar.selectbox("Select your variable", list_code)
-    indicator_name = dat_vars.filter(pl.col("Indicator Code") == indicator_code).select("Indicator Name").to_series()[0]
-
-title_text = indicator_name
-subtitle_text = info.filter(pl.col("Indicator Code") == indicator_code).select("SOURCE_NOTE").to_series()[0]
-
-y_axis_title = indicator_name[indicator_name.find("(")+1:indicator_name.find(")")]
-
-use_dat = dat.filter((pl.col("Indicator Code").is_in([str(indicator_code)])) & (~pl.col("Country Code").is_in(drop_country)) & (pl.col("value").is_not_null()))
-
-sp = px.line(use_dat.to_pandas(),
-    x="year", y="value", color="Country Name", markers=True,
-    labels = {"year":"Year", "value":y_axis_title},
-    title = title_text)
-
-st.markdown("## Country performance over time")
-
-st.markdown("_You can read about streamlit [here](slides.html)_")
-
-st.markdown("__" + title_text + "__")
-
-st.markdown(subtitle_text)
-
-st.markdown("### Chart")
-st.markdown("_Use the expand arrows visible when you hover over the upper right corner of the chart to see it in full screen._")
-
-sp
-
-st.markdown("### Table: " + title_text)
+import numpy as np
+import pandas as pd
+import streamlit as st
+import tensorflow as tf
+from keras.preprocessing import image
+#docker build -t streamlit
+# docker compose up
 
-display_dat = use_dat.select("Country Code", "Indicator Name", "year", "value")
+st.markdown("## Bone Fracture Recognition with TensorFlow")
 
-st.dataframe(
-  display_dat\
-    .pivot(index="year", on="Country Code", values="value", aggregate_function="first")\
-    .sort(pl.col("year"),descending=True), hide_index=True,
-    use_container_width=True,
-    column_config={
-        "value": y_axis_title,
-        "year": st.column_config.NumberColumn(
-            "Year",
-            help="Year of data",
-            format="%.0f"
-        )})
 
 
-def convert_df(df):
-    return df.write_csv().encode('utf-8')
+# actu_loc = [actu + f"_{loc}" for loc in locations]
+# fore_loc = [fore + f"_{loc}" for loc in locations]
 
-csv = convert_df(display_dat)
+image_file = st.file_uploader("Upload X-Ray Image", type=['png', 'jpg'])
 
-st.download_button("Download Data", data = csv, file_name = "data.csv", mime="text/csv")
+if image_file:
+    st.image(image_file, caption=None, width=None, use_column_width=None, clamp=False, channels="RGB", output_format="auto")
 
-st.markdown("## My presentation")
 
-# Read file and keep in variable
-with open('slides.html','r') as f: 
-    html_data = f.read()
+model = tf.keras.models.load_model("cnnBoneFracRec.h5")
+target_names = ['Non-Fractured', 'Fractured']
+temp_img = image.load_img(image_file, target_size=(100, 100))
+x = image.img_to_array(temp_img)
+x = np.expand_dims(x, axis=0)
+images = np.vstack([x])
+prediction = np.argmax(model.predict(images), axis=1)
 
-## Show in webpage
-st.components.v1.html(html_data,height=1500)
+prediction_str = target_names[prediction.item()]
+7
+if prediction_str:
+    st.markdown(f"##### Prediction : {prediction_str}")