update: version 2

app.py

@@ -1,443 +1,18 @@
-import numpy as np
-import cv2
 import streamlit as st
-import pandas as pd
-import base64
-from openai import OpenAI
-import copy
-import time
-import io
-import uuid
-import html
+from multipage import MultiPage
+from app_pages import home, about, main
 
+m = MultiPage()
 st.set_page_config(
-    page_title="Image to Analyze",
-    page_icon="📝",
-    layout="wide",
+    page_title='Utilizing Generative AI for automated wafer defect inspection',
+    layout ="wide",
     initial_sidebar_state="expanded",
 )
 
-def inject_js_code(source: str) -> None:
-    div_id = uuid.uuid4()
+# Add all your application here
+m.add_page("Home", "house", home.app)
+m.add_page("About", "info-circle", about.app)
+m.add_page("App", "cast", main.app)
 
-    st.markdown(
-        f"""
-    <div style="display:none" id="{div_id}">
-        <iframe src="javascript: \
-            var script = document.createElement('script'); \
-            script.type = 'text/javascript'; \
-            script.text = {html.escape(repr(source))}; \
-            var div = window.parent.document.getElementById('{div_id}'); \
-            div.appendChild(script); \
-            div.parentElement.parentElement.parentElement.style.display = 'none'; \
-        "/>
-    </div>
-    """,
-        unsafe_allow_html=True,
-    )
-
-def screenshot_window() -> None:
-    # JS Code to be executed
-    source = """
-// Function to detect if the current browser is Chrome
-const isChrome = () => /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
-
-/*
-const button = document.getElementById('reportButton');
-button.addEventListener('click', function() {
-    // Alert and exit if the browser is Chrome
-    if (isChrome()) {
-        //alert("Currently this function is available only on Firefox!");
-        //button.style.display = 'none'; // Hides the button
-        //return;
-    }
-
-    // Load a script dynamically and execute a callback after loading
-    const loadScript = (url, isLoaded, callback) => {
-        if (!isLoaded()) {
-            const script = document.createElement('script');
-            script.type = 'text/javascript';
-            script.onload = callback;
-            script.src = url;
-            document.head.appendChild(script);
-        } else {
-            callback();
-        }
-    };
-
-    // Check if html2canvas library is loaded
-    const isHtml2CanvasLoaded = () => typeof html2canvas !== 'undefined';
-
-    // Capture an individual iframe and call a callback with the result
-    const captureIframe = (iframe, callback) => {
-        try {
-            const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
-            console.log(iframeDoc)
-            html2canvas(iframeDoc.body, {
-                scale: 1,
-                logging: true,
-                useCORS: true,
-                allowTaint: true
-            }).then(canvas => {
-                callback(canvas ? canvas : null);
-            }).catch(error => {
-                console.error('Could not capture iframe:', error);
-                callback(null);
-            });
-        } catch (error) {
-            console.error('Could not access iframe:', error);
-            callback(null);
-        }
-    };
-
-    // Main function to capture all windows
-    const captureAllWindows = () => {
-        const streamlitDoc = window.parent.document;
-        const stApp = streamlitDoc.querySelector('.main > .block-container');
-        const iframes = Array.from(stApp.querySelectorAll('iframe'));
-        let capturedImages = [];
-
-        // Process each iframe sequentially
-        const processIframes = (index = 0) => {
-            if (index < iframes.length) {
-                captureIframe(iframes[index], function(canvas) {
-                    if (canvas) {
-                        const img = document.createElement('img');
-                        img.src = canvas.toDataURL('image/png');
-                        capturedImages.push({iframe: iframes[index], img: img});
-                    } else {
-                        console.error('Skipping an iframe due to capture failure.');
-                    }
-                    processIframes(index + 1);
-                });
-            } else {
-                // Capture the main app window after processing all iframes
-                html2canvas(stApp, {
-                    onclone: function(clonedDocument) {
-                        const clonedIframes = Array.from(clonedDocument.querySelectorAll('iframe'));
-                        capturedImages.forEach(({img}, index) => {
-                            if (index < clonedIframes.length) {
-                                const clonedIframe = clonedIframes[index];
-                                clonedIframe.parentNode.replaceChild(img, clonedIframe);
-                            }
-                        });
-                    },
-                    scale: 1,
-                    logging: true,
-                    useCORS: true,
-                    allowTaint: true,
-                    ignoreElements: () => {}
-                }).then(finalCanvas => {
-                    // Create a download link for the captured image
-                    finalCanvas.toBlob(blob => {
-                        const url = window.URL.createObjectURL(blob);
-                        var link = document.createElement('a');
-                        link.style.display = 'none';
-                        link.href = url;
-                        link.download = 'screenshot.png';
-                        document.body.appendChild(link);
-                        link.click();
-                        document.body.removeChild(link);
-                        window.URL.revokeObjectURL(url);
-                    });
-                }).catch(error => {
-                    console.error('Screenshot capture failed:', error);
-                });
-            }
-        };
-
-        processIframes();
-    };
-
-    loadScript(
-        'https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js',
-        isHtml2CanvasLoaded,
-        captureAllWindows
-    );
-
-});
-*/
-"""
-
-    inject_js_code(source=source)
-
-def add_reportgen_button():
-    st.markdown(
-        """
-        <!-- <button id="reportButton" class="st-style-button">Generate Page Report</button> -->
-
-        <style>
-        .st-style-button {
-            display: inline-flex;
-            -webkit-box-align: center;
-            align-items: center;
-            -webkit-box-pack: center;
-            justify-content: center;
-            font-weight: 400;
-            padding: 0.25rem 0.75rem;
-            border-radius: 0.5rem;
-            min-height: 38.4px;
-            margin: 0px;
-            line-height: 1.6;
-            color: inherit;
-            width: auto;
-            user-select: none;
-            background-color: white; /* Set a white background */
-            border: 1px solid rgba(49, 51, 63, 0.2);
-            outline: none; !important
-            box-shadow: none !important;
-        }
-
-        /* Change background on mouse-over */
-        .st-style-button:hover {
-            background-color: white;
-            color: #0A04D2;
-            border: 1px solid #0A04D2;
-        }
-
-        </style>
-        """,
-        unsafe_allow_html=True,
-    )
-    screenshot_window()
-
-add_reportgen_button()
-
-client = OpenAI(api_key='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')
-
-col1, col2 = st.columns(2)
-
-wl1, wl2 = st.columns(2)
-
-def to_base64(uploaded_file):
-    file_buffer = uploaded_file.read()
-    b64 = base64.b64encode(file_buffer).decode()
-    return f"data:image/png;base64,{b64}"
-
-def generate_df(new_img_list):
-
-    # if st.session_state.buttondo:
-    #     for img in new_img_list:
-    #         with open(img, mode="rb") as f:
-    #             uploaded_file = f.read()
-            
-    #         current_df = pd.DataFrame(
-    #             {
-    #                 "image_id": img,
-    #                 "image": f"data:image/png;base64,{base64.b64encode(uploaded_file).decode()}",
-    #                 "name": img,
-    #                 "defect_type": "",
-    #                 "description": "",
-    #             }
-    #         )
-    
-    # else:
-    current_df = pd.DataFrame(
-        {
-            "image_id": [img.file_id for img in st.session_state.images],
-            "image": [to_base64(img) for img in st.session_state.images],
-            "name": [img.name for img in st.session_state.images],
-            "defect_type": [""] * len(st.session_state.images),
-            "description": [""] * len(st.session_state.images),
-        }
-    )
-
-    if "df" not in st.session_state:
-        st.session_state.df = current_df
-        return
-
-    new_df = pd.merge(current_df, st.session_state.df, on=["image_id"], how="outer", indicator=True)
-    new_df = new_df[new_df["_merge"] != "right_only"].drop(columns=["_merge", "name_y", "image_y", "description_x"])
-    new_df = new_df.rename(columns={"name_x": "name", "image_x": "image", "description_y": "description"})
-    new_df["defect_type"] = new_df["defect_type"].fillna("")
-    new_df["description"] = new_df["description"].fillna("")
-
-    st.session_state.df = new_df
-
-
-def render_df():
-    def highlight_col(x):
-        r = 'background-color: red'
-        df1 = pd.DataFrame('', index=x.index, columns=x.columns)
-        df1.iloc[:, 2] = r
-        return df1    
-    
-    st.session_state.df.style.apply(highlight_col, axis=None)
-
-    st.data_editor(
-        st.session_state.df,
-        column_config={
-            "image": st.column_config.ImageColumn(
-                "Preview Image", help="Image preview", width=100
-            ),
-            "name": st.column_config.Column("Name", help="Image name", width=200),
-            "defect_type": st.column_config.Column(
-                "Defect Type", help="Defect description", width=400
-            ),
-            "description": st.column_config.Column(
-                "Description", help="Image description", width=800
-            ),
-        },
-        disabled=True,
-        hide_index=True,
-        height=500,
-        column_order=["image", "name", "defect_type", "description"],
-        use_container_width=True,
-    )
-
-
-def generate_description(image_base64):
-    response = client.chat.completions.create(
-        model="gpt-4-vision-preview",
-        messages=[
-            {
-                "role": "user",
-                "content": [
-                    {"type": "text", "text": """Please answer at the following format:
-                     Defect
-                     Description: <Analyze how the wafer defect type in the image>"""},
-                    {
-                        "type": "image_url",
-                        "image_url": {
-                            "url": image_base64,
-                        },
-                    },
-                ],
-            }
-        ],
-        max_tokens=50,
-    )
-    return response.choices[0].message.content
-
-
-def update_df():
-    indexes = st.session_state.df[st.session_state.df["description"] == ""].index
-    for idx in indexes:
-        description = generate_description(st.session_state.df.loc[idx, "image"])
-        st.session_state.df.loc[idx, "defect_type"] = description.split("\n")[0]
-        st.session_state.df.loc[idx, "description"] = description.split("\n")[-1]
-
-#Creating title for Streamlit app
-st.title("Wafer Defect Detection with LLM Classification and Analyze")
-
-st.components.v1.iframe("https://whitewolf21.github.io/live/", width=None, height=750, scrolling=False)
-
-default_img = ""
-st.session_state.buttondo = False
-
-with st.sidebar:
-    st.title("Upload Your Images")
-    st.session_state.images = st.file_uploader(label=" ", accept_multiple_files=True)
-
-    genre = st.radio(
-        "Baseline",
-        ["Propose Solution", "Baseline 1", "Baseline 2", "Baseline 3"])
-    
-    Center = st.checkbox('Center')
-    if Center:
-        st.image('44.png', width=100)
-    
-    Donut = st.checkbox('Donut')
-    if Donut:
-        st.image('7316.png', width=100)
-    
-    EdgeLoc = st.checkbox('Edge-Loc')
-    if EdgeLoc:
-        st.image('36.png', width=100)
-    
-    EdgeRing = st.checkbox('Edge-Ring')
-    if EdgeRing:
-        st.image('100.png', width=100)
-    
-    Loc = st.checkbox('Loc')
-    if Loc:
-        st.image('19.png', width=100)
-    
-    NearFull = st.checkbox('Near-Full')
-    if NearFull:
-        st.image('929.png', width=100)
-    
-    NoDefect = st.checkbox('No Defect')
-    if NoDefect:
-        st.image('0.png', width=100)
-    
-    Random = st.checkbox('Random')
-    if Random:
-        st.image('602.png', width=100)
-    
-    Scratch = st.checkbox('Scratch')
-    if Scratch:
-        st.image('134.png', width=100)
-
-    if st.button("Detect", type="primary"):
-        st.session_state.buttondo = True
-
-#uploading file for processing
-# uploaded_file = st.file_uploader("Choose an image", type=["jpg", "jpeg", "png"])
-    
-if st.session_state.images or st.session_state.buttondo:
-    imgs = []
-    new_img_list = copy.deepcopy(st.session_state.images)
-    # if st.session_state.buttondo:
-    #     new_img_list = [default_img]
-    # else:
-    #     new_img_list = copy.deepcopy(st.session_state.images)
-
-    for img in new_img_list:
-        image = cv2.imdecode(np.frombuffer(img.read(), np.uint8), 1)
-        # if st.session_state.buttondo:
-        #     image = cv2.imread(img)
-        # else:
-        #     image = cv2.imdecode(np.frombuffer(img.read(), np.uint8), 1)
-
-        img = image.copy()
-        gray=cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)
-
-        blur=cv2.blur(gray,(10,10))
-
-        dst=cv2.fastNlMeansDenoising(blur,None,10,7,21)
-
-        _,binary=cv2.threshold(dst,127,255,cv2.THRESH_BINARY+cv2.THRESH_OTSU)
-
-        kernel=np.ones((5,5),np.uint8)
-
-        erosion=cv2.erode(binary,kernel,iterations=1)
-        dilation=cv2.dilate(binary,kernel,iterations=1)
-
-        if (dilation==0).sum()>1:
-            contours,_=cv2.findContours(dilation,cv2.RETR_TREE,cv2.CHAIN_APPROX_NONE)
-            for i in contours:
-                if cv2.contourArea(i)<261121.0:
-                    cv2.drawContours(img,i,-1,(0,0,255),3)
-                cv2.putText(img,"",(30,40),cv2.FONT_HERSHEY_SIMPLEX,1,(0,0,255),2)
-        else:
-            cv2.putText(img, "Good wafer", (30, 40), cv2.FONT_HERSHEY_SIMPLEX, 1, (0, 0, 255), 2)
-
-        # st.image(image,caption="original image",channels="BGR")
-        # st.image(blur,caption="blur")
-        # st.image(binary,caption="binary")
-        # st.image(erosion,caption="erosion")
-        # st.image(dilation,caption="dilation")
-        imgs.append(img)
-
-    # st.image(imgs)
-
-    with st.spinner('Wait for it...'):
-        time.sleep(10)
-    st.success('Done!')
-
-    generate_df(new_img_list)
-    # print(st.session_state.images)
-    update_df()
-    
-    st.download_button(
-        "Download descriptions as CSV",
-        st.session_state.df.drop(['image', "image_id"], axis=1).to_csv(index=False),
-        "descriptions.csv",
-        "text/csv",
-        use_container_width=True
-    )
-
-    render_df()
-# cv2.waitKey(0)
-# cv2.destroyAllWindows()
+# The main app
+m.run()

app_pages/about.py

@@ -0,0 +1,15 @@
+import streamlit as st
+
+def app():
+    col1, col2, col3 = st.columns([0.2, 1, 0.2])
+
+    with col1:
+        st.write(' ')
+
+    with col2:
+        st.image('Saitama_Team_Presentation_Page2.png', use_column_width=True)
+
+    with col3:
+        st.write(' ')
+
+    st.write("")

app_pages/home.py

@@ -0,0 +1,26 @@
+import streamlit as st
+
+def app():
+    col1, col2, col3 = st.columns([0.2, 0.75, 0.2])
+
+    with col1:
+        st.write(' ')
+
+    with col2:
+        st.image('Saitama_Team_Presentation_Page1.png', use_column_width=True)
+
+        st.write("")
+
+        st.markdown('''#### Utilizing Generative AI for automated wafer defect inspection''')
+        st.write("")
+        st.write("")
+
+        st.markdown("#####  This app allows you to live demo of our proposed solutions:")
+        st.write("")
+        st.write("")
+        st.markdown("👈 Select the **About** page from the sidebar for our information")
+
+        st.markdown("👈 or directly select the **App** page")
+
+    with col3:
+        st.write(' ')

app_pages/main.py

@@ -0,0 +1,5 @@
+import streamlit as st
+
+def app():
+    
+    st.components.v1.iframe("https://15a9-14-161-45-131.ngrok-free.app", height=1000)

multipage.py

@@ -0,0 +1,68 @@
+"""
+This file is the framework for generating multiple Streamlit applications
+through an object oriented framework.
+
+Source: https://huggingface.co/spaces/deepset/wikipedia-assistant/tree/main
+"""
+
+# Import necessary libraries
+import streamlit as st
+from streamlit_option_menu import option_menu
+
+
+# Define the multipage class to manage the multiple apps in our program
+class MultiPage:
+    """Framework for combining multiple streamlit applications."""
+
+    def __init__(self) -> None:
+        """Constructor class to generate a list which will store all our applications as an instance variable."""
+        self.pages = []
+
+    def add_page(self, title, icon, func) -> None:
+        """Class Method to Add pages to the project
+
+        Args:
+            title ([str]): The title of page which we are adding to the list of apps
+
+            func: Python function to render this page in Streamlit
+        """
+
+        self.pages.append(
+            {
+                "title": title,
+                "icon": icon,
+                "function": func
+            }
+        )
+
+    def run(self):
+        # Drodown to select the page to run
+        st.markdown("""
+            <style>
+                section[data-testid="stSidebar"] > div:first-of-type {
+                    background-color: var(--secondary-background-color);
+                    background: var(--secondary-background-color);
+                    width: 250px;
+                    padding: 0rem 0;
+                    box-shadow: -2rem 0px 2rem 2rem rgba(0,0,0,0.16);
+                }
+                section[aria-expanded="true"] > div:nth-of-type(2) {
+                    display: none;
+                }
+                .main > div:first-of-type {
+                    padding: 1rem 0;
+                }
+            </style>
+        """, unsafe_allow_html=True)
+
+        with st.sidebar:
+            selected = option_menu("OCR Comparator",
+                                   [page["title"] for page in self.pages],
+                                   icons=[page["icon"] for page in self.pages],
+                                   menu_icon="app-indicator", default_index=0)
+
+        # Run the selected page
+        for index, item in enumerate(self.pages):
+            if item["title"] == selected:
+                self.pages[index]["function"]()
+                break

requirements.txt

@@ -1,59 +1,2 @@
-altair==5.2.0
-annotated-types==0.6.0
-anyio==4.3.0
-attrs==23.2.0
-blinker==1.7.0
-cachetools==5.3.3
-certifi==2024.2.2
-charset-normalizer==3.3.2
-click==8.1.7
-colorama==0.4.6
-distro==1.9.0
-exceptiongroup==1.2.0
-gitdb==4.0.11
-GitPython==3.1.42
-h11==0.14.0
-httpcore==1.0.4
-httpx==0.27.0
-idna==3.6
-importlib_metadata==7.0.2
-Jinja2==3.1.3
-jsonschema==4.21.1
-jsonschema-specifications==2023.12.1
-markdown-it-py==3.0.0
-MarkupSafe==2.1.5
-mdurl==0.1.2
-numpy==1.26.4
-openai==1.12.0
-opencv-python==4.9.0.80
-packaging==23.2
-pandas==2.2.0
-pillow==10.2.0
-protobuf==4.25.3
-pyarrow==15.0.1
-pydantic==2.6.4
-pydantic_core==2.16.3
-pydeck==0.8.1b0
-Pygments==2.17.2
-python-dateutil==2.9.0.post0
-pytz==2024.1
-referencing==0.33.0
-requests==2.31.0
-rich==13.7.1
-rpds-py==0.18.0
-six==1.16.0
-smmap==5.0.1
-sniffio==1.3.1
-streamlit==1.31.0
-tenacity==8.2.3
-toml==0.10.2
-toolz==0.12.1
-tornado==6.4
-tqdm==4.66.2
-typing_extensions==4.10.0
-tzdata==2024.1
-tzlocal==5.2
-urllib3==2.2.1
-validators==0.22.0
-watchdog==4.0.0
-zipp==3.18.0
+streamlit
+streamlit_option_menu