Initial commit

.gitattributes

@@ -32,3 +32,8 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+assets/ab.png filter=lfs diff=lfs merge=lfs -text
+docs/image/receipt_00001.png filter=lfs diff=lfs merge=lfs -text
+docs/image/receipt_00002.png filter=lfs diff=lfs merge=lfs -text
+docs/image/receipt_00003.png filter=lfs diff=lfs merge=lfs -text
+docs/image/w_invoice1.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,2 @@
+
+.DS_Store

.streamlit/config.toml

@@ -0,0 +1,183 @@
+# Below are all the sections and options you can have in ~/.streamlit/config.toml.
+
+[global]
+
+# By default, Streamlit checks if the Python watchdog module is available and, if not, prints a warning asking for you to install it. The watchdog module is not required, but highly recommended. It improves Streamlit's ability to detect changes to files in your filesystem.
+# If you'd like to turn off this warning, set this to True.
+# Default: false
+disableWatchdogWarning = true
+
+# If True, will show a warning when you run a Streamlit-enabled script via "python my_script.py".
+# Default: true
+# showWarningOnDirectExecution = true
+
+# DataFrame serialization.
+# Acceptable values: - 'legacy': Serialize DataFrames using Streamlit's custom format. Slow but battle-tested. - 'arrow': Serialize DataFrames using Apache Arrow. Much faster and versatile.
+# Default: "arrow"
+# dataFrameSerialization = "arrow"
+
+
+[logger]
+
+# Level of logging: 'error', 'warning', 'info', or 'debug'.
+# Default: 'info'
+# level = "info"
+
+# String format for logging messages. If logger.datetimeFormat is set, logger messages will default to `%(asctime)s.%(msecs)03d %(message)s`. See [Python's documentation](https://docs.python.org/2.6/library/logging.html#formatter-objects) for available attributes.
+# Default: "%(asctime)s %(message)s"
+# messageFormat = "%(asctime)s %(message)s"
+
+
+[client]
+
+# Whether to enable st.cache.
+# Default: true
+# caching = true
+
+# If false, makes your Streamlit script not draw to a Streamlit app.
+# Default: true
+# displayEnabled = true
+
+# Controls whether uncaught app exceptions are displayed in the browser. By default, this is set to True and Streamlit displays app exceptions and associated tracebacks in the browser.
+# If set to False, an exception will result in a generic message being shown in the browser, and exceptions and tracebacks will be printed to the console only.
+# Default: true
+# showErrorDetails = true
+
+
+[runner]
+
+# Allows you to type a variable or string by itself in a single line of Python code to write it to the app.
+# Default: true
+# magicEnabled = true
+
+# Install a Python tracer to allow you to stop or pause your script at any point and introspect it. As a side-effect, this slows down your script's execution.
+# Default: false
+# installTracer = false
+
+# Sets the MPLBACKEND environment variable to Agg inside Streamlit to prevent Python crashing.
+# Default: true
+# fixMatplotlib = true
+
+# Run the Python Garbage Collector after each script execution. This can help avoid excess memory use in Streamlit apps, but could introduce delay in rerunning the app script for high-memory-use applications.
+# Default: true
+# postScriptGC = true
+
+# Handle script rerun requests immediately, rather than waiting for script execution to reach a yield point. Enabling this will make Streamlit much more responsive to user interaction, but it can lead to race conditions in apps that mutate session_state data outside of explicit session_state assignment statements.
+# Default: false
+fastReruns = true
+
+
+[server]
+
+# List of folders that should not be watched for changes. This impacts both "Run on Save" and @st.cache.
+# Relative paths will be taken as relative to the current working directory.
+# Example: ['/home/user1/env', 'relative/path/to/folder']
+# Default: []
+# folderWatchBlacklist = []
+
+# Change the type of file watcher used by Streamlit, or turn it off completely.
+# Allowed values: * "auto" : Streamlit will attempt to use the watchdog module, and falls back to polling if watchdog is not available. * "watchdog" : Force Streamlit to use the watchdog module. * "poll" : Force Streamlit to always use polling. * "none" : Streamlit will not watch files.
+# Default: "auto"
+fileWatcherType = "auto"
+
+# Symmetric key used to produce signed cookies. If deploying on multiple replicas, this should be set to the same value across all replicas to ensure they all share the same secret.
+# Default: randomly generated secret key.
+# cookieSecret = "80f9eb91f1eb64e26f0e46148556bf493ccde5fe27712bbcbebf57948852b5fe"
+
+# If false, will attempt to open a browser window on start.
+# Default: false unless (1) we are on a Linux box where DISPLAY is unset, or (2) we are running in the Streamlit Atom plugin.
+# headless = false
+
+# Automatically rerun script when the file is modified on disk.
+# Default: false
+# runOnSave = false
+
+# The address where the server will listen for client and browser connections. Use this if you want to bind the server to a specific address. If set, the server will only be accessible from this address, and not from any aliases (like localhost).
+# Default: (unset)
+# address =
+
+# The port where the server will listen for browser connections.
+# Default: 8501
+ port = 7860
+
+# The base path for the URL where Streamlit should be served from.
+# Default: ""
+# baseUrlPath = ""
+
+# Enables support for Cross-Origin Request Sharing (CORS) protection, for added security.
+# Due to conflicts between CORS and XSRF, if `server.enableXsrfProtection` is on and `server.enableCORS` is off at the same time, we will prioritize `server.enableXsrfProtection`.
+# Default: true
+# enableCORS = true
+
+# Enables support for Cross-Site Request Forgery (XSRF) protection, for added security.
+# Due to conflicts between CORS and XSRF, if `server.enableXsrfProtection` is on and `server.enableCORS` is off at the same time, we will prioritize `server.enableXsrfProtection`.
+# Default: true
+# enableXsrfProtection = true
+
+# Max size, in megabytes, for files uploaded with the file_uploader.
+# Default: 200
+ maxUploadSize = 10
+
+# Max size, in megabytes, of messages that can be sent via the WebSocket connection.
+# Default: 200
+# maxMessageSize = 200
+
+# Enables support for websocket compression.
+# Default: false
+# enableWebsocketCompression = false
+
+
+[browser]
+
+# Internet address where users should point their browsers in order to connect to the app. Can be IP address or DNS name and path.
+# This is used to: - Set the correct URL for CORS and XSRF protection purposes. - Show the URL on the terminal - Open the browser
+# Default: "localhost"
+# serverAddress = "localhost"
+
+# Whether to send usage statistics to Streamlit.
+# Default: true
+gatherUsageStats = false
+
+# Port where users should point their browsers in order to connect to the app.
+# This is used to: - Set the correct URL for CORS and XSRF protection purposes. - Show the URL on the terminal - Open the browser
+# Default: whatever value is set in server.port.
+# serverPort = 8501
+
+
+[mapbox]
+
+# Configure Streamlit to use a custom Mapbox token for elements like st.pydeck_chart and st.map. To get a token for yourself, create an account at https://mapbox.com. It's free (for moderate usage levels)!
+# Default: ""
+# token = ""
+
+
+[deprecation]
+
+# Set to false to disable the deprecation warning for the file uploader encoding.
+# Default: true
+# showfileUploaderEncoding = true
+
+# Set to false to disable the deprecation warning for using the global pyplot instance.
+# Default: true
+# showPyplotGlobalUse = true
+
+
+[theme]
+
+# The preset Streamlit theme that your custom theme inherits from. One of "light" or "dark".
+# base =
+
+# Primary accent color for interactive elements.
+# primaryColor = "#F633"
+
+# Background color for the main content area.
+backgroundColor = "#FFFFFF"
+
+# Background color used for the sidebar and most interactive widgets.
+secondaryBackgroundColor = "#F0F2F6"
+
+# Color used for almost all text.
+textColor = "#262730"
+
+# Font family for all text in the app, except code blocks. One of "sans serif", "serif", or "monospace".
+font = "sans serif"

Dockerfile

@@ -0,0 +1,22 @@
+FROM python:3.11-slim
+
+WORKDIR /code
+
+COPY requirements.txt ./
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+RUN useradd -m -u 1000 user
+
+USER user
+
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+WORKDIR $HOME/app
+
+COPY --chown=user . $HOME/app
+
+COPY --chown=user config/config.toml $HOME/app/.streamlit/config.toml
+
+CMD ["streamlit", "run", "main.py", "--server.port=7860", "--server.address=0.0.0.0"]

config/config.toml

@@ -0,0 +1,183 @@
+# Below are all the sections and options you can have in ~/.streamlit/config.toml.
+
+[global]
+
+# By default, Streamlit checks if the Python watchdog module is available and, if not, prints a warning asking for you to install it. The watchdog module is not required, but highly recommended. It improves Streamlit's ability to detect changes to files in your filesystem.
+# If you'd like to turn off this warning, set this to True.
+# Default: false
+disableWatchdogWarning = true
+
+# If True, will show a warning when you run a Streamlit-enabled script via "python my_script.py".
+# Default: true
+# showWarningOnDirectExecution = true
+
+# DataFrame serialization.
+# Acceptable values: - 'legacy': Serialize DataFrames using Streamlit's custom format. Slow but battle-tested. - 'arrow': Serialize DataFrames using Apache Arrow. Much faster and versatile.
+# Default: "arrow"
+# dataFrameSerialization = "arrow"
+
+
+[logger]
+
+# Level of logging: 'error', 'warning', 'info', or 'debug'.
+# Default: 'info'
+# level = "info"
+
+# String format for logging messages. If logger.datetimeFormat is set, logger messages will default to `%(asctime)s.%(msecs)03d %(message)s`. See [Python's documentation](https://docs.python.org/2.6/library/logging.html#formatter-objects) for available attributes.
+# Default: "%(asctime)s %(message)s"
+# messageFormat = "%(asctime)s %(message)s"
+
+
+[client]
+
+# Whether to enable st.cache.
+# Default: true
+# caching = true
+
+# If false, makes your Streamlit script not draw to a Streamlit app.
+# Default: true
+# displayEnabled = true
+
+# Controls whether uncaught app exceptions are displayed in the browser. By default, this is set to True and Streamlit displays app exceptions and associated tracebacks in the browser.
+# If set to False, an exception will result in a generic message being shown in the browser, and exceptions and tracebacks will be printed to the console only.
+# Default: true
+# showErrorDetails = true
+
+
+[runner]
+
+# Allows you to type a variable or string by itself in a single line of Python code to write it to the app.
+# Default: true
+# magicEnabled = true
+
+# Install a Python tracer to allow you to stop or pause your script at any point and introspect it. As a side-effect, this slows down your script's execution.
+# Default: false
+# installTracer = false
+
+# Sets the MPLBACKEND environment variable to Agg inside Streamlit to prevent Python crashing.
+# Default: true
+# fixMatplotlib = true
+
+# Run the Python Garbage Collector after each script execution. This can help avoid excess memory use in Streamlit apps, but could introduce delay in rerunning the app script for high-memory-use applications.
+# Default: true
+# postScriptGC = true
+
+# Handle script rerun requests immediately, rather than waiting for script execution to reach a yield point. Enabling this will make Streamlit much more responsive to user interaction, but it can lead to race conditions in apps that mutate session_state data outside of explicit session_state assignment statements.
+# Default: false
+fastReruns = true
+
+
+[server]
+
+# List of folders that should not be watched for changes. This impacts both "Run on Save" and @st.cache.
+# Relative paths will be taken as relative to the current working directory.
+# Example: ['/home/user1/env', 'relative/path/to/folder']
+# Default: []
+# folderWatchBlacklist = []
+
+# Change the type of file watcher used by Streamlit, or turn it off completely.
+# Allowed values: * "auto" : Streamlit will attempt to use the watchdog module, and falls back to polling if watchdog is not available. * "watchdog" : Force Streamlit to use the watchdog module. * "poll" : Force Streamlit to always use polling. * "none" : Streamlit will not watch files.
+# Default: "auto"
+fileWatcherType = "auto"
+
+# Symmetric key used to produce signed cookies. If deploying on multiple replicas, this should be set to the same value across all replicas to ensure they all share the same secret.
+# Default: randomly generated secret key.
+# cookieSecret = "80f9eb91f1eb64e26f0e46148556bf493ccde5fe27712bbcbebf57948852b5fe"
+
+# If false, will attempt to open a browser window on start.
+# Default: false unless (1) we are on a Linux box where DISPLAY is unset, or (2) we are running in the Streamlit Atom plugin.
+# headless = false
+
+# Automatically rerun script when the file is modified on disk.
+# Default: false
+# runOnSave = false
+
+# The address where the server will listen for client and browser connections. Use this if you want to bind the server to a specific address. If set, the server will only be accessible from this address, and not from any aliases (like localhost).
+# Default: (unset)
+# address =
+
+# The port where the server will listen for browser connections.
+# Default: 8501
+ port = 7860
+
+# The base path for the URL where Streamlit should be served from.
+# Default: ""
+# baseUrlPath = ""
+
+# Enables support for Cross-Origin Request Sharing (CORS) protection, for added security.
+# Due to conflicts between CORS and XSRF, if `server.enableXsrfProtection` is on and `server.enableCORS` is off at the same time, we will prioritize `server.enableXsrfProtection`.
+# Default: true
+# enableCORS = true
+
+# Enables support for Cross-Site Request Forgery (XSRF) protection, for added security.
+# Due to conflicts between CORS and XSRF, if `server.enableXsrfProtection` is on and `server.enableCORS` is off at the same time, we will prioritize `server.enableXsrfProtection`.
+# Default: true
+# enableXsrfProtection = true
+
+# Max size, in megabytes, for files uploaded with the file_uploader.
+# Default: 200
+ maxUploadSize = 10
+
+# Max size, in megabytes, of messages that can be sent via the WebSocket connection.
+# Default: 200
+# maxMessageSize = 200
+
+# Enables support for websocket compression.
+# Default: false
+# enableWebsocketCompression = false
+
+
+[browser]
+
+# Internet address where users should point their browsers in order to connect to the app. Can be IP address or DNS name and path.
+# This is used to: - Set the correct URL for CORS and XSRF protection purposes. - Show the URL on the terminal - Open the browser
+# Default: "localhost"
+# serverAddress = "localhost"
+
+# Whether to send usage statistics to Streamlit.
+# Default: true
+gatherUsageStats = false
+
+# Port where users should point their browsers in order to connect to the app.
+# This is used to: - Set the correct URL for CORS and XSRF protection purposes. - Show the URL on the terminal - Open the browser
+# Default: whatever value is set in server.port.
+# serverPort = 8501
+
+
+[mapbox]
+
+# Configure Streamlit to use a custom Mapbox token for elements like st.pydeck_chart and st.map. To get a token for yourself, create an account at https://mapbox.com. It's free (for moderate usage levels)!
+# Default: ""
+# token = ""
+
+
+[deprecation]
+
+# Set to false to disable the deprecation warning for the file uploader encoding.
+# Default: true
+# showfileUploaderEncoding = true
+
+# Set to false to disable the deprecation warning for using the global pyplot instance.
+# Default: true
+# showPyplotGlobalUse = true
+
+
+[theme]
+
+# The preset Streamlit theme that your custom theme inherits from. One of "light" or "dark".
+# base =
+
+# Primary accent color for interactive elements.
+# primaryColor = "#F633"
+
+# Background color for the main content area.
+backgroundColor = "#FFFFFF"
+
+# Background color used for the sidebar and most interactive widgets.
+secondaryBackgroundColor = "#F0F2F6"
+
+# Color used for almost all text.
+textColor = "#262730"
+
+# Font family for all text in the app, except code blocks. One of "sans serif", "serif", or "monospace".
+font = "sans serif"

docs/json/receipt_00001.json

@@ -0,0 +1,163 @@
+{
+  "meta": {
+    "version": "v0.1",
+    "split": "train",
+    "image_id": 1,
+    "image_size": {
+      "width": 864,
+      "height": 1296
+    }
+  },
+  "words": [
+    {
+      "rect": {
+        "x1": 503,
+        "y1": 475,
+        "x2": 637,
+        "y2": 516
+      },
+      "value": "58,000",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 498,
+        "y1": 520,
+        "x2": 638,
+        "y2": 561
+      },
+      "value": "165,000",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 496,
+        "y1": 607,
+        "x2": 640,
+        "y2": 650
+      },
+      "value": "195,000",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 518,
+        "y1": 696,
+        "x2": 650,
+        "y2": 738
+      },
+      "value": "22,000",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 520,
+        "y1": 746,
+        "x2": 649,
+        "y2": 787
+      },
+      "value": "28,000",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 522,
+        "y1": 792,
+        "x2": 652,
+        "y2": 835
+      },
+      "value": "35,000",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 507,
+        "y1": 883,
+        "x2": 656,
+        "y2": 933
+      },
+      "value": "503,000",
+      "label": "subtotal"
+    },
+    {
+      "rect": {
+        "x1": 533,
+        "y1": 936,
+        "x2": 660,
+        "y2": 976
+      },
+      "value": "52,815",
+      "label": "tax"
+    },
+    {
+      "rect": {
+        "x1": 343,
+        "y1": 1022,
+        "x2": 641,
+        "y2": 1124
+      },
+      "value": "580,965",
+      "label": "total"
+    },
+    {
+      "rect": {
+        "x1": 111,
+        "y1": 472,
+        "x2": 464,
+        "y2": 515
+      },
+      "value": "SPGTHY BOLOGNASE",
+      "label": "item"
+    },
+    {
+      "rect": {
+        "x1": 108,
+        "y1": 521,
+        "x2": 350,
+        "y2": 567
+      },
+      "value": "PEPPER AUS",
+      "label": "item"
+    },
+    {
+      "rect": {
+        "x1": 109,
+        "y1": 610,
+        "x2": 387,
+        "y2": 652
+      },
+      "value": "WAGYU RIBEYE",
+      "label": "item"
+    },
+    {
+      "rect": {
+        "x1": 113,
+        "y1": 704,
+        "x2": 438,
+        "y2": 749
+      },
+      "value": "ICED LEMON TEA",
+      "label": "item"
+    },
+    {
+      "rect": {
+        "x1": 111,
+        "y1": 753,
+        "x2": 472,
+        "y2": 800
+      },
+      "value": "FUSION TEA LYCHE",
+      "label": "item"
+    },
+    {
+      "rect": {
+        "x1": 110,
+        "y1": 806,
+        "x2": 471,
+        "y2": 849
+      },
+      "value": "NUTTELA BROWNIES",
+      "label": "item"
+    }
+  ]
+}

docs/json/receipt_00002.json

@@ -0,0 +1,14 @@
+{
+  "meta": {
+    "version": "v0.1",
+    "split": "train",
+    "image_id": 2,
+    "image_size": {
+      "width": 720,
+      "height": 1280
+    }
+  },
+  "words": [
+
+  ]
+}

docs/json/receipt_00003.json

@@ -0,0 +1,33 @@
+{
+  "meta": {
+    "version": "v0.1",
+    "split": "train",
+    "image_id": 3,
+    "image_size": {
+      "width": 1108,
+      "height": 1478
+    }
+  },
+  "words": [
+    {
+      "rect": {
+        "x1": 712,
+        "y1": 755,
+        "x2": 846,
+        "y2": 797
+      },
+      "value": "59,000",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 715,
+        "y1": 849,
+        "x2": 845,
+        "y2": 894
+      },
+      "value": "10,000",
+      "label": "item_price"
+    }
+  ]
+}

docs/json/w_invoice1.json

@@ -0,0 +1,83 @@
+{
+  "meta": {
+    "version": "v0.1",
+    "split": "train",
+    "image_id": 5,
+    "image_size": {
+      "width": 830,
+      "height": 1080
+    }
+  },
+  "words": [
+    {
+      "rect": {
+        "x1": 681,
+        "y1": 274,
+        "x2": 761,
+        "y2": 298
+      },
+      "value": "$1,699.48",
+      "label": "amount_due"
+    },
+    {
+      "rect": {
+        "x1": 703,
+        "y1": 517,
+        "x2": 765,
+        "y2": 539
+      },
+      "value": "$550.00",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 544,
+        "y1": 274,
+        "x2": 631,
+        "y2": 297
+      },
+      "value": "INV-10012",
+      "label": "invoice_number"
+    },
+    {
+      "rect": {
+        "x1": 691,
+        "y1": 880,
+        "x2": 762,
+        "y2": 907
+      },
+      "value": "$169.95",
+      "label": "deposit_due"
+    },
+    {
+      "rect": {
+        "x1": 694,
+        "y1": 582,
+        "x2": 763,
+        "y2": 607
+      },
+      "value": "$1,125.00",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 701,
+        "y1": 650,
+        "x2": 767,
+        "y2": 673
+      },
+      "value": "$123.39",
+      "label": "item_price"
+    },
+    {
+      "rect": {
+        "x1": 681,
+        "y1": 718,
+        "x2": 761,
+        "y2": 748
+      },
+      "value": "$1,798.39",
+      "label": "subtotal"
+    }
+  ]
+}

docs/visitors.json

@@ -0,0 +1 @@
+{"meta": {"visitors": 3100}}

main.py

@@ -0,0 +1,136 @@
+import streamlit as st
+from streamlit_option_menu import option_menu
+from tools.utilities import load_css
+import json
+
+from views.dashboard import Dashboard
+from views.data_annotation import DataAnnotation
+from views.model_training import ModelTraining
+from views.model_tuning import ModelTuning
+from views.data_extraction import DataExtraction
+from views.settings import Settings
+from views.about import About
+
+import streamlit_javascript as st_js
+
+st.set_page_config(
+    page_title="Sparrow",
+    page_icon="favicon.ico",
+    layout="wide"
+)
+
+load_css()
+
+
+class Model:
+    menuTitle = "Sparrow"
+    option1 = "Dashboard"
+    option2 = "Data Annotation"
+    option3 = "Model Training"
+    option4 = "Model Tuning"
+    option5 = "Data Extraction"
+    option6 = "Settings"
+    option7 = "About"
+
+    menuIcon = "menu-up"
+    icon1 = "speedometer"
+    icon2 = "activity"
+    icon3 = "motherboard"
+    icon4 = "graph-up-arrow"
+    icon5 = "clipboard-data"
+    icon6 = "gear"
+    icon7 = "chat"
+
+
+def view(model):
+    with st.sidebar:
+        menuItem = option_menu(model.menuTitle,
+                               [model.option1, model.option2, model.option7],
+                               icons=[model.icon1, model.icon2, model.icon7],
+                               menu_icon=model.menuIcon,
+                               default_index=0,
+                               styles={
+                                   "container": {"padding": "5!important", "background-color": "#fafafa"},
+                                   "icon": {"color": "black", "font-size": "25px"},
+                                   "nav-link": {"font-size": "16px", "text-align": "left", "margin": "0px",
+                                                "--hover-color": "#eee"},
+                                   "nav-link-selected": {"background-color": "#037ffc"},
+                               })
+
+    if menuItem == model.option1:
+        Dashboard().view(Dashboard.Model())
+        logout_widget()
+
+    if menuItem == model.option2:
+        if 'ui_width' not in st.session_state or 'device_type' not in st.session_state or 'device_width' not in st.session_state:
+            # Get UI width
+            ui_width = st_js.st_javascript("window.innerWidth", key="ui_width_comp")
+            device_width = st_js.st_javascript("window.screen.width", key="device_width_comp")
+
+            if ui_width > 0 and device_width > 0:
+                # Add 20% of current screen width to compensate for the sidebar
+                ui_width = round(ui_width + (20 * ui_width / 100))
+
+                if device_width > 768:
+                    device_type = 'desktop'
+                else:
+                    device_type = 'mobile'
+
+                st.session_state['ui_width'] = ui_width
+                st.session_state['device_type'] = device_type
+                st.session_state['device_width'] = device_width
+
+                st.experimental_rerun()
+        else:
+            DataAnnotation().view(DataAnnotation.Model(), st.session_state['ui_width'], st.session_state['device_type'],
+                                  st.session_state['device_width'])
+        logout_widget()
+
+    if menuItem == model.option3:
+        ModelTraining().view(ModelTraining.Model())
+        logout_widget()
+
+    if menuItem == model.option4:
+        ModelTuning().view(ModelTuning.Model())
+        logout_widget()
+
+    if menuItem == model.option5:
+        DataExtraction().view(DataExtraction.Model())
+        logout_widget()
+
+    if menuItem == model.option6:
+        Settings().view(Settings.Model())
+        logout_widget()
+
+    if menuItem == model.option7:
+        About().view(About.Model())
+        logout_widget()
+
+
+def logout_widget():
+    with st.sidebar:
+        st.markdown("---")
+        # st.write("User:", "John Doe")
+        st.write("Version:", "0.0.1")
+        # st.button("Logout")
+        # st.markdown("---")
+
+        if 'visitors' not in st.session_state:
+            with open("docs/visitors.json", "r") as f:
+                visitors_json = json.load(f)
+                visitors = visitors_json["meta"]["visitors"]
+
+            visitors += 1
+            visitors_json["meta"]["visitors"] = visitors
+
+            with open("docs/visitors.json", "w") as f:
+                json.dump(visitors_json, f)
+
+            st.session_state['visitors'] = visitors
+        else:
+            visitors = st.session_state['visitors']
+
+        st.write("Counter:", visitors)
+
+
+view(Model())

requirements.txt

@@ -0,0 +1,5 @@
+streamlit==1.16.0
+streamlit_option_menu
+streamlit-sparrow-labeling==0.1.1
+streamlit_nested_layout
+streamlit-javascript

tools/st_functions.py

@@ -0,0 +1,72 @@
+import streamlit as st
+
+
+def st_button(icon, url, label, iconsize):
+    if icon == 'youtube':
+        button_code = f'''
+        <p>
+            <a href={url} class="btn btn-outline-primary btn-lg btn-block" type="button" aria-pressed="true">
+                <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
+                    <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
+                </svg>  
+                {label}
+            </a>
+        </p>'''
+    elif icon == 'twitter':
+        button_code = f'''
+        <p>
+        <a href={url} class="btn btn-outline-primary btn-lg btn-block" type="button" aria-pressed="true">
+            <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-twitter" viewBox="0 0 16 16">
+                <path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
+            </svg>
+            {label}
+        </a>
+        </p>'''
+    elif icon == 'linkedin':
+        button_code = f'''
+        <p>
+            <a href={url} class="btn btn-outline-primary btn-lg btn-block" type="button" aria-pressed="true">
+                <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-linkedin" viewBox="0 0 16 16">
+                    <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
+                </svg>
+                {label}
+            </a>
+        </p>'''
+    elif icon == 'medium':
+        button_code = f'''
+        <p>
+            <a href={url} class="btn btn-outline-primary btn-lg btn-block" type="button" aria-pressed="true">
+                <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-medium" viewBox="0 0 16 16">
+                    <path d="M9.025 8c0 2.485-2.02 4.5-4.513 4.5A4.506 4.506 0 0 1 0 8c0-2.486 2.02-4.5 4.512-4.5A4.506 4.506 0 0 1 9.025 8zm4.95 0c0 2.34-1.01 4.236-2.256 4.236-1.246 0-2.256-1.897-2.256-4.236 0-2.34 1.01-4.236 2.256-4.236 1.246 0 2.256 1.897 2.256 4.236zM16 8c0 2.096-.355 3.795-.794 3.795-.438 0-.793-1.7-.793-3.795 0-2.096.355-3.795.794-3.795.438 0 .793 1.699.793 3.795z"/>
+                </svg>
+                {label}
+            </a>
+        </p>'''
+    elif icon == 'newsletter':
+        button_code = f'''
+        <p>
+            <a href={url} class="btn btn-outline-primary btn-lg btn-block" type="button" aria-pressed="true">
+                <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
+                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
+                </svg>
+                {label}
+            </a>
+        </p>'''
+    elif icon == 'github':
+        button_code = f'''
+        <p>
+            <a href={url} class="btn btn-outline-primary btn-lg btn-block" type="button" aria-pressed="true">
+                <svg xmlns="http://www.w3.org/2000/svg" width={iconsize} height={iconsize} fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
+                </svg>
+                {label}
+            </a>
+        </p>'''
+    elif icon == '':
+        button_code = f'''
+        <p>
+            <a href={url} class="btn btn-outline-primary btn-lg btn-block" type="button" aria-pressed="true">
+                {label}
+            </a>
+        </p>'''
+    return st.markdown(button_code, unsafe_allow_html=True)

tools/style.css

@@ -0,0 +1,57 @@
+/* Move block container higher */
+div.block-container.css-18e3th9.egzxvld2 {
+    margin-top: -5.8em;
+}
+
+/* Move menu container higher */
+div.css-1vq4p4l.e1fqkh3o4 {
+    padding-top: 3rem;
+}
+
+/* Hide anchor link */
+.css-1dgmtll.e16nr0p32 {
+    display: none
+}
+
+div[data-testid="metric-container"] {
+    background-color: #f7f8fa;
+    border: 1px solid #0c0d0d;
+    padding: 5% 5% 5% 10%;
+    border-radius: 5px;
+    color: rgb(30, 103, 119);
+    overflow-wrap: break-word;
+}
+
+/* breakline for metric text         */
+div[data-testid="metric-container"] > label[data-testid="stMetricLabel"] > div {
+    overflow-wrap: break-word;
+    white-space: break-spaces;
+    color: black;
+}
+
+/* Hide Streamlit bars */
+#MainMenu {
+    visibility: hidden;
+}
+
+footer {
+    visibility: hidden;
+}
+
+/*header {*/
+/*    visibility: hidden;*/
+/*}*/
+
+/*About page styling*/
+
+.css-12oz5g7.egzxvld2 {
+    padding-top: 0px;
+}
+
+.css-1v0mbdj.etr89bj1 {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    min-width: 180px;
+    max-width: 40%;
+}

tools/utilities.py

@@ -0,0 +1,9 @@
+import streamlit as st
+
+
+def load_css():
+    with open("tools/style.css") as f:
+        st.markdown('<style>{}</style>'.format(f.read()), unsafe_allow_html=True)
+    st.markdown(
+        '<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">',
+        unsafe_allow_html=True)

views/about.py

@@ -0,0 +1,33 @@
+import streamlit as st
+from PIL import Image
+from tools.st_functions import st_button
+
+
+class About:
+    class Model:
+        pageTitle = "About"
+
+    def view(self, model):
+        st.title(model.pageTitle)
+
+        st.write(
+            "[![Star](https://img.shields.io/github/stars/katanaml/sparrow.svg?logo=github&style=social)](https://github.com/katanaml/sparrow)")
+
+        col1, col2, col3 = st.columns(3)
+        col2.image(Image.open('assets/ab.png'))
+
+        st.markdown("<h1 style='text-align: center; color: black; font-weight: bold;'>Andrej Baranovskij, Founder Katana ML</h1>",
+                    unsafe_allow_html=True)
+
+        st.info(
+            'Sparrow is a tool for data extraction from PDFs, images, and other documents. It is a part of Katana ML, '
+            'a platform for data science and machine learning.')
+
+        icon_size = 20
+
+        st_button('youtube', 'https://www.youtube.com/@AndrejBaranovskij', 'Andrej Baranovskij YouTube channel', icon_size)
+        st_button('github', 'https://github.com/katanaml/sparrow', 'Sparrow GitHub', icon_size)
+        st_button('twitter', 'https://twitter.com/andrejusb', 'Follow me on Twitter', icon_size)
+        st_button('medium', 'https://andrejusb.medium.com', 'Read my Blogs on Medium', icon_size)
+        st_button('linkedin', 'https://www.linkedin.com/in/andrej-baranovskij/', 'Follow me on LinkedIn', icon_size)
+        st_button('', 'https://katanaml.io', 'Katana ML', icon_size)

views/dashboard.py

@@ -0,0 +1,86 @@
+import streamlit as st
+import numpy as np
+import pandas as pd
+
+
+class Dashboard:
+    class Model:
+        pageTitle = "Dashboard"
+
+        documentsTitle = "Documents"
+        documentsCount = "10.5K"
+        documentsDelta = "125"
+
+        annotationsTitle = "Annotations"
+        annotationsCount = "510"
+        annotationsDelta = "-2"
+
+        accuracyTitle = "Accuracy"
+        accuracyCount = "87.9%"
+        accuracyDelta = "0.1%"
+
+        trainingTitle = "Training Time"
+        trainingCount = "1.5 hrs"
+        trainingDelta = "10 mins"
+
+        processingTitle = "Processing Time"
+        processingCount = "3 secs"
+        processingDelta = "-0.1 secs"
+
+        titleDataExtraction = "## Data Extraction"
+        titleModelTraining = "## Model Training"
+        titleDataAnnotation = "## Data Annotation"
+
+    def view(self, model):
+        st.title(model.pageTitle)
+
+        with st.container():
+            col1, col2, col3, col4, col5 = st.columns(5)
+
+            with col1:
+                st.metric(label=model.documentsTitle, value=model.documentsCount, delta=model.documentsDelta)
+
+            with col2:
+                st.metric(label=model.annotationsTitle, value=model.annotationsCount, delta=model.annotationsDelta)
+
+            with col3:
+                st.metric(label=model.accuracyTitle, value=model.accuracyCount, delta=model.accuracyDelta)
+
+            with col4:
+                st.metric(label=model.trainingTitle, value=model.trainingCount, delta=model.trainingDelta, delta_color="inverse")
+
+            with col5:
+                st.metric(label=model.processingTitle, value=model.processingCount, delta=model.processingDelta, delta_color="inverse")
+
+            st.markdown("---")
+
+
+        with st.container():
+            st.write(model.titleDataExtraction)
+            chart_data = pd.DataFrame(
+                np.random.randn(20, 3),
+                columns=['a', 'b', 'c'])
+
+            st.line_chart(chart_data)
+
+        st.markdown("---")
+
+        with st.container():
+            col1, col2 = st.columns(2)
+
+            with col1:
+                with st.container():
+                    st.write(model.titleModelTraining)
+
+                    # You can call any Streamlit command, including custom components:
+                    st.bar_chart(np.random.randn(50, 3))
+
+            with col2:
+                with st.container():
+                    st.write(model.titleDataAnnotation)
+
+                    chart_data = pd.DataFrame(
+                        np.random.randn(20, 3),
+                        columns=['a', 'b', 'c'])
+
+                    st.area_chart(chart_data)

views/data_annotation.py

@@ -0,0 +1,340 @@
+import streamlit as st
+from PIL import Image
+import streamlit_nested_layout
+from streamlit_sparrow_labeling import st_sparrow_labeling
+from streamlit_sparrow_labeling import DataProcessor
+import json
+import math
+import os
+
+
+class DataAnnotation:
+    class Model:
+        pageTitle = "Data Annotation"
+
+        img_file = None
+        rects_file = None
+
+        assign_labels_text = "Assign Labels"
+        text_caption_1 = "Check 'Assign Labels' to enable editing of labels and values, move and resize the boxes to annotate the document."
+        text_caption_2 = "Add annotations by clicking and dragging on the document, when 'Assign Labels' is unchecked."
+
+        labels = ["", "item", "item_price", "subtotal", "tax", "total", "date_issued", "due_date", "invoice_number",
+                  "amount_due", "deposit_due"]
+
+        selected_field = "Selected Field: "
+        save_text = "Save"
+        saved_text = "Saved!"
+
+        subheader_1 = "Select"
+        subheader_2 = "Upload"
+        annotation_text = "Annotation"
+        no_annotation_file = "No annotation file selected"
+        no_annotation_mapping = "Please annotate the document. Uncheck 'Assign Labels' and draw new annotations"
+
+        download_text = "Download"
+        download_hint = "Download the annotated structure in JSON format"
+
+        annotation_selection_help = "Select an annotation file to load"
+        upload_help = "Upload a file to annotate"
+        upload_button_text = "Upload"
+        upload_button_text_desc = "Choose a file"
+
+        assign_labels_text = "Assign Labels"
+        assign_labels_help = "Check to enable editing of labels and values"
+        save_help = "Save the annotations"
+
+        error_text = "Value is too long. Please shorten it."
+
+    def view(self, model, ui_width, device_type, device_width):
+        with st.sidebar:
+            st.markdown("---")
+            st.subheader(model.subheader_1)
+
+            placeholder_upload = st.empty()
+
+            file_names = self.get_existing_file_names('docs/image/')
+
+            if 'annotation_index' not in st.session_state:
+                st.session_state['annotation_index'] = 0
+                annotation_index = 0
+            else:
+                annotation_index = st.session_state['annotation_index']
+
+            annotation_selection = placeholder_upload.selectbox(model.annotation_text, file_names,
+                                                                index=annotation_index,
+                                                                help=model.annotation_selection_help)
+            annotation_index = self.get_annotation_index(annotation_selection, file_names)
+            st.session_state['annotation_index'] = annotation_index
+
+            file_extension = self.get_file_extension(annotation_selection, 'docs/image/')
+            model.img_file = f"docs/image/{annotation_selection}" + file_extension
+            model.rects_file = f"docs/json/{annotation_selection}.json"
+
+            st.subheader(model.subheader_2)
+
+            with st.form("upload-form", clear_on_submit=True):
+                uploaded_file = st.file_uploader(model.upload_button_text_desc, accept_multiple_files=False,
+                                                 type=['png', 'jpg', 'jpeg'],
+                                                 help=model.upload_help)
+                submitted = st.form_submit_button(model.upload_button_text, disabled=True)
+
+                if submitted and uploaded_file is not None:
+                    ret = self.upload_file(uploaded_file)
+
+                    if ret is not False:
+                        file_names = self.get_existing_file_names('docs/image/')
+
+                        annotation_index = self.get_annotation_index(annotation_selection, file_names)
+                        annotation_selection = placeholder_upload.selectbox(model.annotation_text, file_names,
+                                                                            index=annotation_index,
+                                                                            help=model.annotation_selection_help)
+                        st.session_state['annotation_index'] = annotation_index
+
+        st.title(model.pageTitle + " - " + annotation_selection)
+
+        if model.img_file is None:
+            st.caption(model.no_annotation_file)
+            return
+
+        saved_state = self.fetch_annotations(model.rects_file)
+
+        assign_labels = st.checkbox(model.assign_labels_text, True, help=model.assign_labels_help)
+        mode = "transform" if assign_labels else "rect"
+
+        docImg = Image.open(model.img_file)
+
+        data_processor = DataProcessor()
+
+        with st.container():
+            doc_height = saved_state['meta']['image_size']['height']
+            doc_width = saved_state['meta']['image_size']['width']
+            canvas_width, number_of_columns = self.canvas_available_width(ui_width, doc_width, device_type,
+                                                                          device_width)
+
+            if number_of_columns > 1:
+                col1, col2 = st.columns([number_of_columns, 10 - number_of_columns])
+                with col1:
+                    result_rects = self.render_doc(model, docImg, saved_state, mode, canvas_width, doc_height, doc_width)
+                with col2:
+                    self.render_form(model, result_rects, data_processor, number_of_columns, annotation_selection)
+            else:
+                result_rects = self.render_doc(model, docImg, saved_state, mode, canvas_width, doc_height, doc_width)
+                self.render_form(model, result_rects, data_processor, number_of_columns, annotation_selection)
+
+    def render_doc(self, model, docImg, saved_state, mode, canvas_width, doc_height, doc_width):
+        with st.container():
+            height = 1296
+            width = 864
+
+            result_rects = st_sparrow_labeling(
+                fill_color="rgba(0, 151, 255, 0.3)",
+                stroke_width=2,
+                stroke_color="rgba(0, 50, 255, 0.7)",
+                background_image=docImg,
+                initial_rects=saved_state,
+                height=height,
+                width=width,
+                drawing_mode=mode,
+                display_toolbar=True,
+                update_streamlit=True,
+                canvas_width=canvas_width,
+                doc_height=doc_height,
+                doc_width=doc_width,
+                image_rescale=True,
+                key="doc_annotation" + model.img_file
+            )
+
+            st.caption(model.text_caption_1)
+            st.caption(model.text_caption_2)
+
+            return result_rects
+
+    def render_form(self, model, result_rects, data_processor, number_of_columns, annotation_selection):
+        with st.container():
+            if result_rects is not None:
+                if len(result_rects.rects_data['words']) == 0:
+                    st.caption(model.no_annotation_mapping)
+                    return
+                else:
+                    with open(model.rects_file, 'rb') as file:
+                        st.download_button(label=model.download_text,
+                                           data=file,
+                                           file_name=annotation_selection + ".json",
+                                           mime='application/json',
+                                           help=model.download_hint)
+
+                with st.form(key="fields_form"):
+                    if result_rects.current_rect_index is not None and result_rects.current_rect_index != -1:
+                        st.write(model.selected_field,
+                                 result_rects.rects_data['words'][result_rects.current_rect_index]['value'])
+                        st.markdown("---")
+
+                    if number_of_columns == 4:
+                        self.render_form_wide(result_rects.rects_data['words'], model.labels, result_rects,
+                                              data_processor)
+                    elif number_of_columns == 5:
+                        self.render_form_avg(result_rects.rects_data['words'], model.labels, result_rects,
+                                             data_processor)
+                    elif number_of_columns == 6:
+                        self.render_form_narrow(result_rects.rects_data['words'], model.labels, result_rects,
+                                                data_processor)
+                    else:
+                        self.render_form_mobile(result_rects.rects_data['words'], model.labels, result_rects,
+                                                data_processor)
+
+                    submit = st.form_submit_button(model.save_text, type="primary", help=model.save_help, disabled=True)
+                    if submit:
+
+                        for word in result_rects.rects_data['words']:
+                            if len(word['value']) > 100:
+                                st.error(model.error_text)
+                                return
+
+                        with open(model.rects_file, "w") as f:
+                            json.dump(result_rects.rects_data, f, indent=2)
+                        st.session_state[model.rects_file] = result_rects.rects_data
+                        # st.write(model.saved_text)
+                        st.experimental_rerun()
+
+    def render_form_wide(self, words, labels, result_rects, data_processor):
+        col1_form, col2_form, col3_form, col4_form = st.columns([1, 1, 1, 1])
+        num_rows = math.ceil(len(words) / 4)
+
+        for i, rect in enumerate(words):
+            if i < num_rows:
+                with col1_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+            elif i < num_rows * 2:
+                with col2_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+            elif i < num_rows * 3:
+                with col3_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+            else:
+                with col4_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+
+    def render_form_avg(self, words, labels, result_rects, data_processor):
+        col1_form, col2_form, col3_form = st.columns([1, 1, 1])
+        num_rows = math.ceil(len(words) / 3)
+
+        for i, rect in enumerate(words):
+            if i < num_rows:
+                with col1_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+            elif i < num_rows * 2:
+                with col2_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+            else:
+                with col3_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+
+    def render_form_narrow(self, words, labels, result_rects, data_processor):
+        col1_form, col2_form = st.columns([1, 1])
+        num_rows = math.ceil(len(words) / 2)
+
+        for i, rect in enumerate(words):
+            if i < num_rows:
+                with col1_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+            else:
+                with col2_form:
+                    self.render_form_element(rect, labels, i, result_rects, data_processor)
+
+    def render_form_mobile(self, words, labels, result_rects, data_processor):
+        for i, rect in enumerate(words):
+            self.render_form_element(rect, labels, i, result_rects, data_processor)
+
+    def render_form_element(self, rect, labels, i, result_rects, data_processor):
+        default_index = 0
+        if rect['label']:
+            default_index = labels.index(rect['label'])
+
+        value = st.text_input("Value", rect['value'], key=f"field_value_{i}",
+                              disabled=False if i == result_rects.current_rect_index else True)
+        label = st.selectbox("Label", labels, key=f"label_{i}", index=default_index,
+                             disabled=False if i == result_rects.current_rect_index else True)
+        st.markdown("---")
+
+        data_processor.update_rect_data(result_rects.rects_data, i, value, label)
+
+    def canvas_available_width(self, ui_width, doc_width, device_type, device_width):
+        doc_width_pct = (doc_width * 100) / ui_width
+        if doc_width_pct < 45:
+            canvas_width_pct = 37
+        elif doc_width_pct < 55:
+            canvas_width_pct = 49
+        else:
+            canvas_width_pct = 65
+
+        if ui_width > 700 and canvas_width_pct == 37 and device_type == "desktop":
+            return math.floor(canvas_width_pct * ui_width / 100), 4
+        elif ui_width > 700 and canvas_width_pct == 49 and device_type == "desktop":
+            return math.floor(canvas_width_pct * ui_width / 100), 5
+        elif ui_width > 700 and canvas_width_pct == 65 and device_type == "desktop":
+            return math.floor(canvas_width_pct * ui_width / 100), 6
+        else:
+            if device_type == "desktop":
+                ui_width = device_width - math.floor((device_width * 22) / 100)
+            elif device_type == "mobile":
+                ui_width = device_width - math.floor((device_width * 13) / 100)
+            return ui_width, 1
+
+    def fetch_annotations(self, rects_file):
+        if rects_file not in st.session_state:
+            with open(rects_file, "r") as f:
+                saved_state = json.load(f)
+                st.session_state[rects_file] = saved_state
+        else:
+            saved_state = st.session_state[rects_file]
+
+        return saved_state
+
+    def upload_file(self, uploaded_file):
+        if uploaded_file is not None:
+            if os.path.exists(os.path.join("docs/image/", uploaded_file.name)):
+                st.write("File already exists")
+                return False
+
+            if len(uploaded_file.name) > 100:
+                st.write("File name too long")
+                return False
+
+            with open(os.path.join("docs/image/", uploaded_file.name), "wb") as f:
+                f.write(uploaded_file.getbuffer())
+
+            img_file = Image.open(os.path.join("docs/image/", uploaded_file.name))
+
+            annotations_json = {
+                "meta": {
+                    "version": "v0.1",
+                    "split": "train",
+                    "image_id": len(self.get_existing_file_names("docs/image/")),
+                    "image_size": {
+                        "width": img_file.width,
+                        "height": img_file.height
+                    }
+                },
+                "words": []
+            }
+
+            file_name = uploaded_file.name.split(".")[0]
+            with open(os.path.join("docs/json/", file_name + ".json"), "w") as f:
+                json.dump(annotations_json, f, indent=2)
+
+            st.write("File uploaded successfully")
+
+    def get_existing_file_names(self, dir_name):
+        # get ordered list of files without file extension, excluding hidden files
+        return sorted([os.path.splitext(f)[0] for f in os.listdir(dir_name) if not f.startswith('.')])
+
+    def get_file_extension(self, file_name, dir_name):
+        # get list of files, excluding hidden files
+        files = [f for f in os.listdir(dir_name) if not f.startswith('.')]
+        for f in files:
+            if file_name is not  None and os.path.splitext(f)[0] == file_name:
+                return os.path.splitext(f)[1]
+
+    def get_annotation_index(self, file, files_list):
+        return files_list.index(file)

views/data_extraction.py

@@ -0,0 +1,9 @@
+import streamlit as st
+
+
+class DataExtraction:
+    class Model:
+        pageTitle = "Data Extraction"
+
+    def view(self, model):
+        st.title(model.pageTitle)

views/model_training.py

@@ -0,0 +1,9 @@
+import streamlit as st
+
+
+class ModelTraining:
+    class Model:
+        pageTitle = "Model Training"
+
+    def view(self, model):
+        st.title(model.pageTitle)

views/model_tuning.py

@@ -0,0 +1,9 @@
+import streamlit as st
+
+
+class ModelTuning:
+    class Model:
+        pageTitle = "Model Tuning"
+
+    def view(self, model):
+        st.title(model.pageTitle)

views/settings.py

@@ -0,0 +1,9 @@
+import streamlit as st
+
+
+class Settings:
+    class Model:
+        pageTitle = "Settings"
+
+    def view(self, model):
+        st.title(model.pageTitle)