minimal docs and visual presentation

.gitattributes

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 example1.jpg filter=lfs diff=lfs merge=lfs -text
 example2.jpg filter=lfs diff=lfs merge=lfs -text
+media/* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,3 +1,4 @@
 __pycache__
 main.ipynb
 blankexample.jpeg
+models/TrOCR

README.md

@@ -10,4 +10,37 @@ pinned: false
 license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Circuit Sketch Recognition 👁
+
+## About the App
+The **Circuit Sketch Recognition** app demonstrates the power of AI to recognize hand-drawn circuit diagrams. By leveraging advanced models like TrOCR for text recognition and YOLOv8 for component detection, this app showcases how easily computers can understand sketches (Fine tuned on a CGHD-2304 dataset).
+
+<p align="center">
+  <img src="media/capture.gif" alt="Capture GIF" width="45%"/>
+  <img src="media/upload.gif" alt="Upload GIF" width="45%"/>
+</p>
+
+
+## Features
+- **Upload or Capture**: Upload a picture of your circuit sketch or use your camera to capture one in real-time.
+- **Dual Display**: View both capture and upload options in a side-by-side format for easy access.
+- **Example Gallery**: Explore a gallery of recognized sketches to see the accuracy and capabilities of our AI models.
+
+## Deployment
+
+Deployed on Streamlit and Hugging Face Spaces:
+
+<a href="https://circuitsketchrecognition.streamlit.app/">
+  <img src="https://streamlit.io/images/brand/streamlit-mark-color.png" alt="Streamlit" width="30"/> Streamlit App
+</a>
+
+<a href="https://huggingface.co/spaces/edesaras/CircuitSketchRecognition">
+  <img src="https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo.png" alt="Huggingface" width="30"/> Huggingface App
+</a>
+
+## Getting Started
+To get started with the Circuit Sketch Recognition app, simply clone the repository and run the `🤗_Hello.py` file with Streamlit:
+
+```bash
+git clone https://github.com/edesaras/CircuitSketchRecognition.git
+streamlit run 🤗_Hello.py

🤗_Hello.py

@@ -6,10 +6,25 @@ if __name__ == "__main__":
         page_title="Circuit Sketch Recognizer",
         layout="wide"
     )
-
     st.title("Circuit Sketch Recognition")
+    st.markdown(
+        '''
+        Can computers recognize hand-drawn circuit sketches? Absolutely!
+
+        Upload a picture of your circuit sketch or take a new one to see it in action.
+
+        This project leverages fine tuned TrOCR for text recognition and YOLOv8 for component detection, using CGHD-2304 dataset. 
+        '''
+    )
+
     col1, col2 = st.columns(2)
     with col1:
-        st.image('example1.jpg', use_column_width=True, caption='Example 1')
+        st.image('media/capture.gif', use_column_width=True, caption='Take a Picture')
     with col2:
-        st.image('example2.jpg', use_column_width=True, caption='Example 2')
+        st.image('media/upload.gif', use_column_width=True, caption='Upload an Image')
+    st.markdown('Here are some more examples!')
+    col3, col4 = st.columns(2)
+    with col3:
+        st.image('media/example1.jpg', use_column_width=True, caption='Example 1')
+    with col4:
+        st.image('media/example2.jpg', use_column_width=True, caption='Example 2')