test

.idea/workspace.xml

@@ -4,8 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="5e4481c0-7ba2-42e4-bbe6-4c36a0d36baa" name="Changes" comment="adjust style">
+    <list default="true" id="5e4481c0-7ba2-42e4-bbe6-4c36a0d36baa" name="Changes" comment="js">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app.py" beforeDir="false" afterPath="$PROJECT_DIR$/app.py" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/web_page.css" beforeDir="false" afterPath="$PROJECT_DIR$/web_page.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/web_page.html" beforeDir="false" afterPath="$PROJECT_DIR$/web_page.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
@@ -32,19 +34,20 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;DefaultHtmlFileTemplate&quot;: &quot;HTML File&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "DefaultHtmlFileTemplate": "HTML File",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "WebServerToolWindowFactoryState": "false",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
       <recent name="$PROJECT_DIR$" />
@@ -63,7 +66,7 @@
       <workItem from="1723386893769" duration="12000" />
       <workItem from="1723386970626" duration="451000" />
       <workItem from="1723387453009" duration="27328000" />
-      <workItem from="1723978405562" duration="2241000" />
+      <workItem from="1723978405562" duration="17227000" />
     </task>
     <task id="LOCAL-00001" summary="create">
       <created>1723387548126</created>
@@ -303,7 +306,70 @@
       <option name="project" value="LOCAL" />
       <updated>1723980132468</updated>
     </task>
-    <option name="localTasksCounter" value="35" />
+    <task id="LOCAL-00035" summary="adjust style">
+      <created>1723980657743</created>
+      <option name="number" value="00035" />
+      <option name="presentableId" value="LOCAL-00035" />
+      <option name="project" value="LOCAL" />
+      <updated>1723980657743</updated>
+    </task>
+    <task id="LOCAL-00036" summary="adjust style">
+      <created>1723981735701</created>
+      <option name="number" value="00036" />
+      <option name="presentableId" value="LOCAL-00036" />
+      <option name="project" value="LOCAL" />
+      <updated>1723981735701</updated>
+    </task>
+    <task id="LOCAL-00037" summary="adjust style">
+      <created>1723981892558</created>
+      <option name="number" value="00037" />
+      <option name="presentableId" value="LOCAL-00037" />
+      <option name="project" value="LOCAL" />
+      <updated>1723981892558</updated>
+    </task>
+    <task id="LOCAL-00038" summary="adjust style">
+      <created>1723982234515</created>
+      <option name="number" value="00038" />
+      <option name="presentableId" value="LOCAL-00038" />
+      <option name="project" value="LOCAL" />
+      <updated>1723982234515</updated>
+    </task>
+    <task id="LOCAL-00039" summary="adjust style">
+      <created>1723982610151</created>
+      <option name="number" value="00039" />
+      <option name="presentableId" value="LOCAL-00039" />
+      <option name="project" value="LOCAL" />
+      <updated>1723982610151</updated>
+    </task>
+    <task id="LOCAL-00040" summary="adjust style">
+      <created>1723982945627</created>
+      <option name="number" value="00040" />
+      <option name="presentableId" value="LOCAL-00040" />
+      <option name="project" value="LOCAL" />
+      <updated>1723982945627</updated>
+    </task>
+    <task id="LOCAL-00041" summary="adjust style">
+      <created>1723983156852</created>
+      <option name="number" value="00041" />
+      <option name="presentableId" value="LOCAL-00041" />
+      <option name="project" value="LOCAL" />
+      <updated>1723983156852</updated>
+    </task>
+    <task id="LOCAL-00042" summary="adjust style">
+      <created>1723983607190</created>
+      <option name="number" value="00042" />
+      <option name="presentableId" value="LOCAL-00042" />
+      <option name="project" value="LOCAL" />
+      <updated>1723983607190</updated>
+    </task>
+    <task id="LOCAL-00043" summary="js">
+      <created>1724027789846</created>
+      <option name="number" value="00043" />
+      <option name="presentableId" value="LOCAL-00043" />
+      <option name="project" value="LOCAL" />
+      <updated>1724027789846</updated>
+    </task>
+    <option name="localTasksCounter" value="44" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -323,6 +389,7 @@
     <MESSAGE value="debug" />
     <MESSAGE value="change the restart time to 1 day" />
     <MESSAGE value="adjust style" />
-    <option name="LAST_COMMIT_MESSAGE" value="adjust style" />
+    <MESSAGE value="js" />
+    <option name="LAST_COMMIT_MESSAGE" value="js" />
   </component>
 </project>

app.py

@@ -1,7 +1,12 @@
+import base64
+from io import BytesIO
+
 import gradio as gr
 import cv2
 import numpy as np
 import shutil
+
+from PIL.Image import Image
 from bs4 import BeautifulSoup
 import requests
 import pandas as pd
@@ -269,6 +274,7 @@ def example_inference_3():
 def new_example_inference_1():
     image_input_bgr = cv2.imread("examples/6-8.jpg")
     image_input = cv2.cvtColor(image_input_bgr, cv2.COLOR_BGR2RGB)
+
     text_input = 'https://www.whatsapp.com/legal/privacy-policy'
 
     out_result_bgr = cv2.imread("results/result_1.png")
@@ -277,7 +283,9 @@ def new_example_inference_1():
     out_segment = pd.read_excel("results/result_1_S.xlsx")
     complete_result = pd.read_excel("results/result_1_C.xlsx")
 
-    return image_input, text_input, out_result, out_segment, complete_result
+    return generate_html_with_image_and_text()
+
+    # return image_input, text_input, out_result, out_segment, complete_result
 
 def new_example_inference_2():
     image_input_bgr = cv2.imread("examples/11-9.jpg")
@@ -305,16 +313,110 @@ def new_example_inference_3():
 
     return image_input, text_input, out_result, out_segment, complete_result
 
+
+# 将图像转换为 Base64 并生成 HTML 代码
+def generate_html_with_image_and_text(img_output, img_input_id, text):
+    # 将 NumPy 图像数组转换为 PIL 图像
+    out_image = Image.fromarray(img_output)
+
+    # 将图像转换为 Base64
+    buffered = BytesIO()
+    out_image.save(buffered, format="PNG")
+    img_base64 = base64.b64encode(buffered.getvalue()).decode("utf-8")
+
+    # 生成包含图像和文本的 HTML 代码
+    html_code = f"""
+    <div>
+        <img id="{img_input_id}" src="data:image/png;base64,{img_base64}" style="max-width: 100%;">
+        <input class="url" type="text" id="inputBox" name="inputBox" placeholder="Privacy Policy URL Link" value="{text}" />
+    </div>
+    """
+    return html_code
+
+
 # def toggle_dataframe_callback():
 #     complete_result_dataframe.visible = not complete_result_dataframe.visible
 
 
-with open('web_page.html', 'r', encoding='utf-8') as file:
-    html_content = file.read()
+with open('web_page.css', 'r') as css_file:
+   css = css_file.read()
 
 with gr.Blocks() as demo:
-    gr.HTML(html_content)
-
+    gr.HTML("""
+    <div class="title">
+        <div class="title_half title_content">
+            <h1>Cpp4App</h1>
+            <p>Automated Contextual Privacy Policies Generation for Mobile Apps.</p>
+            <div class="choice">
+                <a href="#workspace" class="start choice_btn">START</a>
+                <a href="#examples" class="view_examples choice_btn">View examples</a>
+            </div>
+        </div>
+        <div class="title_half">
+            <img src="https://buyanghc.github.io/head.jpg" alt="">
+        </div>
+    </div>
+
+    <div class="examples" id="examples">
+        <div class="head">
+            <h2>EXAMPLES</h2>
+        </div>
+        <p>Click to run the example !</p>
+        <div class="img_box">
+            <div class="eg">
+                <a href="#step2" id="eg1"><img src="https://buyanghc.github.io/eg1.jpg" alt=""></a>
+                <p>· WhatsApp</p>
+            </div>
+            <div class="eg">
+                <a href="#step2" id="eg2"><img src="https://buyanghc.github.io/eg2.jpg" alt=""></a>
+                <p>· Snap</p>
+            </div>
+            <div class="eg">
+                <a href="#step2" id="eg3"><img src="https://buyanghc.github.io/eg3.jpg" alt=""></a>
+                <p>· Mcdonald's</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="workspace" id="workspace">
+        <div class="head">
+            <h2>WORKSPACE</h2>
+            <div class="workspace_btn">
+                <input class="btn run" type="submit" value="RUN">
+                <button class="btn reset">RESET</button>
+            </div>
+        </div>
+
+        <div class="space">
+            <div class="step1">
+                <label for="inputBox">Step 1 : Input privacy policy URL</label>
+                <input class="url" type="text" id="inputBox" name="inputBox" placeholder="Privacy Policy URL Link" />
+            </div>
+
+            <div class="step2" id="step2">
+                <div class="img">
+                    <label for="image-input">Step 2 : Upload the screenshot</label>
+    """)
+
+    gr.Image(type="pil", label="Screenshot Upload", elem_id="image_input").style(container=False)
+
+    gr.HTML("""
+                </div>
+                <div class="point"><img src="https://buyanghc.github.io/point.png" alt=""></div>
+                <div class="img">
+                    <label>Outcome :</label>
+                    <div class="phone" id="output">
+                        <img src="" alt="" id="result">
+                        <div class="left next_btn"></div>
+                        <div class="right next_btn"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    """)
+
+    # 隐藏的gradio组件
     eg_btn1 = gr.Button("Example 1", elem_id="example1", visible=False)
     eg_btn2 = gr.Button("Example 2", elem_id="example2", visible=False)
     eg_btn3 = gr.Button("Example 3", elem_id="example3", visible=False)
@@ -419,7 +521,7 @@ threading.Thread(target=schedule_restarts, args=(24,)).start()  # restart per 24
 threading.Thread(target=schedule_monitoring, args=(12,)).start()  # monitor resources using per 12 hours
 
 try:
-    demo.launch()
+    demo.launch(css=css)
     logger.info('Gradio app launched successfully')
 except Exception as e:
     logger.error('Error occurred while launching Gradio app', exc_info=True)

web_page.css

@@ -5,9 +5,9 @@ body{
     min-height: 100vh;
     background-color: white;  /* Set the background color to white */
     overflow-x: hidden;  /* Hide the horizontal overflow (scrollbar only in the vertical direction) */
-    display: flex;
-    flex-direction: column; /* 按列布局 */
-    align-items: center;
+    display: flex !important;
+    flex-direction: column !important; /* 按列布局 */
+    align-items: center !important;
     color: rgb(40, 40, 40);
 }
 
@@ -31,19 +31,19 @@ body{
     display: flex;
     flex-direction: column; /* 按列布局 */
     justify-content: center; /* 垂直方向居中 */
-    padding-left: 120px;
-    padding-right: 120px;
-    box-sizing: border-box;
+    padding-left: 120px !important;
+    padding-right: 120px !important;
+    box-sizing: border-box !important;
 }
 
 .title_half p{
-    font-size: 22px;
+    font-size: 21px !important;
+    margin-top: 10px;
     font-weight: bolder;
-    margin-top: -10px;
 }
 
 h1{
-    font-size: 80px;
+    font-size: 80px !important;
     font-weight: bolder;
 }
 
@@ -51,7 +51,7 @@ h1{
     display: flex;
     width: 100%;
     height: 80px;
-    margin-top: 50px;
+    margin-top: 50px !important;
 }
 
 .choice_btn{
@@ -67,26 +67,29 @@ h1{
 
 .start{
     background-color: rgb(40, 40, 40);
-    color: white;
+    color: white !important;
     margin-right: 20px;
-    text-decoration: none;
+    text-decoration: none !important;
 }
 
 .start:hover{
-    background-color: rgb(117, 209, 255);
+    background-color: rgb(117, 209, 255) !important;
 }
 
 .view_examples{
-    color: rgb(40, 40, 40);
+    color: rgb(40, 40, 40) !important;
 }
 
 .view_examples:hover{
-    color: rgb(24, 157, 246);
+    color: rgb(24, 157, 246) !important;
 }
 
 .examples{
-    width: 84%;
-    margin-top: 80px;
+    width: 100%;
+    margin-top: 60px;
+    padding-left: 120px;
+    padding-right: 120px;
+    box-sizing: border-box;
 }
 
 .head{
@@ -96,15 +99,15 @@ h1{
 }
 
 h2{
-    font-size: 47px;
+    font-size: 47px !important;
     font-weight: bolder;
 }
 
 .examples p{
-    font-size: 18px;
+    font-size: 18px !important;
     font-weight: bolder;
-    margin-top: -10px;
-    margin-bottom: 50px;
+    margin-top: 20px;
+    margin-bottom: 40px !important;
 }
 
 .img_box{
@@ -119,7 +122,7 @@ h2{
 .eg img{
     width: 100%;
     height: auto;
-    border: 3px solid rgb(188, 204, 212);
+    border: 3px solid rgb(255, 255, 255);
     transition: border-color 0.5s ease, border-width 0.5s ease;
     border-radius: 10px;
     cursor: pointer;
@@ -143,8 +146,11 @@ h2{
 
 
 .workspace{
-    width: 84%;
+    width: 100%;
     margin-top: 80px;
+    padding-left: 120px;
+    padding-right: 120px;
+    box-sizing: border-box;
     margin-bottom: 180px;
     display: flex;
     flex-direction: column; /* 按列布局 */
@@ -163,19 +169,19 @@ h2{
     height: 45px;
     border: 2px solid rgb(40, 40, 40);
     transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
-    border-radius: 2px;
+    border-radius: 5px;
     cursor: pointer;
 }
 
 .run{
-    color: white;
-    background-color: rgb(40, 40, 40);
+    color: white !important;
+    background-color: rgb(40, 40, 40) !important;
 }
 
 .btn:hover{
-    color: white;
-    background-color: rgb(117, 209, 255);
-    border: white;
+    color: white !important;
+    background-color: rgb(117, 209, 255) !important;
+    border: white !important;
 }
 
 .space{
@@ -185,23 +191,24 @@ h2{
 label{
     font-size: 18px;
     font-weight: bolder;
+    margin-bottom: 10px;
 }
 
 .step1{
     display: flex;
     flex-direction: column; /* 按列布局 */
-    margin-top: 30px;
+    margin-top: 50px;
 }
 
 .url{
     height: 50px;
-    margin-top: 20px;
-    margin-bottom: 100px;
+    margin-top: 20px !important;
+    margin-bottom: 100px !important;
     font-size: 20px;
     color: rgb(194, 194, 194);
     padding-left: 10px;
     border: 2px solid rgb(40, 40, 40);
-    border-radius: 5px;
+    border-radius: 5px !important;
 }
 
 .step2{
@@ -233,5 +240,13 @@ label{
     height: 750px;
     border: 2px solid rgb(40, 40, 40);
     border-radius: 5px;
-    margin-top: 20px;
+    margin-top: 20px !important;
+}
+
+#image_input{
+    width: 100%;
+    height: 750px;
+    border: 2px solid rgb(40, 40, 40);
+    border-radius: 5px;
+    margin-top: 20px !important;
 }

web_page.html

@@ -4,252 +4,6 @@
     <meta charset="UTF-8">
     <title>Cpp4App Test</title>
 <!--    <link rel="stylesheet" type="text/css" href="https://buyanghc.github.io/web_page.css">-->
-    <style>
-        body{
-            margin: 0;  /* Remove the default margin */
-            padding: 0;
-            min-width: 100vw;  /* Set the body's minimum width and height to the window's width and height */
-            min-height: 100vh;
-            background-color: white;  /* Set the background color to white */
-            overflow-x: hidden;  /* Hide the horizontal overflow (scrollbar only in the vertical direction) */
-            display: flex !important;
-            flex-direction: column !important; /* 按列布局 */
-            align-items: center !important;
-            color: rgb(40, 40, 40);
-        }
-
-        .title{
-            width: 100%;
-            height: 485px;
-            display: flex;
-        }
-
-        .title_half{
-            width: 50%;
-            height: 100%;
-        }
-
-        .title_half img{
-            width: 100%;
-            height: auto;
-        }
-
-        .title_content{
-            display: flex;
-            flex-direction: column; /* 按列布局 */
-            justify-content: center; /* 垂直方向居中 */
-            padding-left: 120px !important;
-            padding-right: 120px !important;
-            box-sizing: border-box !important;
-        }
-
-        .title_half p{
-            font-size: 21px !important;
-            margin-top: 10px;
-            font-weight: bolder;
-        }
-
-        h1{
-            font-size: 80px !important;
-            font-weight: bolder;
-        }
-
-        .choice{
-            display: flex;
-            width: 100%;
-            height: 80px;
-            margin-top: 50px !important;
-        }
-
-        .choice_btn{
-            width: 150px;
-            height: 50px;
-            display: flex;
-            flex-direction: column; /* 按列布局 */
-            justify-content: center; /* 垂直方向居中 */
-            align-items: center;
-            border-radius: 5px;
-            transition: color 0.3s ease, background-color 0.3s ease;
-        }
-
-        .start{
-            background-color: rgb(40, 40, 40);
-            color: white !important;
-            margin-right: 20px;
-            text-decoration: none !important;
-        }
-
-        .start:hover{
-            background-color: rgb(117, 209, 255) !important;
-        }
-
-        .view_examples{
-            color: rgb(40, 40, 40) !important;
-        }
-
-        .view_examples:hover{
-            color: rgb(24, 157, 246) !important;
-        }
-
-        .examples{
-            width: 100%;
-            margin-top: 60px;
-            padding-left: 120px;
-            padding-right: 120px;
-            box-sizing: border-box;
-        }
-
-        .head{
-            width: 100%;
-            display: flex;
-            justify-content: space-between;
-        }
-
-        h2{
-            font-size: 47px !important;
-            font-weight: bolder;
-        }
-
-        .examples p{
-            font-size: 18px !important;
-            font-weight: bolder;
-            margin-top: 20px;
-            margin-bottom: 40px !important;
-        }
-
-        .img_box{
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .eg{
-            width: 25%;
-        }
-
-        .eg img{
-            width: 100%;
-            height: auto;
-            border: 3px solid rgb(255, 255, 255);
-            transition: border-color 0.5s ease, border-width 0.5s ease;
-            border-radius: 10px;
-            cursor: pointer;
-        }
-
-        .eg img:hover{
-            border-color: rgb(117, 209, 255); /* 悬停时边框颜色 */
-            border-width: 3px; /* 悬停时边框粗细 */
-        }
-
-        .eg p{
-            width: 100%;
-            height: 60px;
-            display: flex;
-            flex-direction: column; /* 按列布局 */
-            justify-content: center; /* 垂直方向居中 */
-            align-items: center;
-            margin: 0;
-            font-style: italic;
-        }
-
-
-        .workspace{
-            width: 100%;
-            margin-top: 80px;
-            padding-left: 120px;
-            padding-right: 120px;
-            box-sizing: border-box;
-            margin-bottom: 180px;
-            display: flex;
-            flex-direction: column; /* 按列布局 */
-            align-items: center;
-        }
-
-        .workspace_btn{
-            width: 350px;
-            display: flex;
-            justify-content: space-between; /* 垂直方向居中 */
-            align-items: center;
-        }
-
-        .btn{
-            width: 150px;
-            height: 45px;
-            border: 2px solid rgb(40, 40, 40);
-            transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        .run{
-            color: white !important;
-            background-color: rgb(40, 40, 40) !important;
-        }
-
-        .btn:hover{
-            color: white !important;
-            background-color: rgb(117, 209, 255) !important;
-            border: white !important;
-        }
-
-        .space{
-            width: 80%;
-        }
-
-        label{
-            font-size: 18px;
-            font-weight: bolder;
-            margin-bottom: 10px;
-        }
-
-        .step1{
-            display: flex;
-            flex-direction: column; /* 按列布局 */
-            margin-top: 50px;
-        }
-
-        .url{
-            height: 50px;
-            margin-top: 20px !important;
-            margin-bottom: 100px !important;
-            font-size: 20px;
-            color: rgb(194, 194, 194);
-            padding-left: 10px;
-            border: 2px solid rgb(40, 40, 40);
-            border-radius: 5px !important;
-        }
-
-        .step2{
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .img{
-            display: flex;
-            flex-direction: column; /* 按列布局 */
-            width: 40%;
-        }
-
-        .point{
-            width: 18%;
-            display: flex;
-            flex-direction: column; /* 按列布局 */
-            justify-content: center;
-            align-items: center;
-        }
-
-        .point img{
-            width: 80%;
-            height: auto;
-        }
-
-        .phone{
-            width: 100%;
-            height: 750px;
-            border: 2px solid rgb(40, 40, 40);
-            border-radius: 5px;
-            margin-top: 20px !important;
-        }
-    </style>
 </head>
 <body>
 
@@ -322,52 +76,52 @@
     </div>
 
     <script>
-        window.onload = function() {
-            // 监听示例图片的点击事件
-            document.querySelectorAll('.eg a').forEach(function(element) {
-                element.addEventListener('click', function(event) {
-                    event.preventDefault();  // 阻止默认的锚点跳转行为
-
-                    // 获取点击的链接的ID
-                    const id = element.id;
-
-                    // 根据链接的ID选择运行不同的Gradio函数
-                    if (id === "eg1") {
-                        gradioApp().querySelector('button[gr-button-id="example1"]').click();
-                    } else if (id === "eg2") {
-                        gradioApp().querySelector('button[gr-button-id="example2"]').click();
-                    } else if (id === "eg3") {
-                        gradioApp().querySelector('button[gr-button-id="example3"]').click();
-                    }
-
-                    // 执行锚点跳转，确保页面滚动到对应位置
-                    const target = document.querySelector(element.getAttribute('href'));
-                    if (target) {
-                        target.scrollIntoView({ behavior: "smooth" });
-                    }
-                });
-            });
-
-
-            document.addEventListener('DOMContentLoaded', function() {
-                // 创建一个MutationObserver来监视Gradio组件的变化
-                const targetNode = gradioApp().querySelector('img[elem_id="image_output"]');
-
-                if (targetNode) {
-                    const observer = new MutationObserver(function(mutationsList, observer) {
-                        for (const mutation of mutationsList) {
-                            if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
-                                // 获取Gradio组件的src属性并设置到HTML img标签中
-                                const newSrc = targetNode.getAttribute('src');
-                                document.getElementById('result').src = newSrc;
-                            }
-                        }
-                    });
-
-                    // 开始观察Gradio组件的src属性变化
-                    observer.observe(targetNode, { attributes: true });
-                }
-            });
+        // window.onload = function() {
+        //     // 监听示例图片的点击事件
+        //     document.querySelectorAll('.eg a').forEach(function(element) {
+        //         element.addEventListener('click', function(event) {
+        //             event.preventDefault();  // 阻止默认的锚点跳转行为
+        //
+        //             // 获取点击的链接的ID
+        //             const id = element.id;
+        //
+        //             // 根据链接的ID选择运行不同的Gradio函数
+        //             if (id === "eg1") {
+        //                 gradioApp().querySelector('button[gr-button-id="example1"]').click();
+        //             } else if (id === "eg2") {
+        //                 gradioApp().querySelector('button[gr-button-id="example2"]').click();
+        //             } else if (id === "eg3") {
+        //                 gradioApp().querySelector('button[gr-button-id="example3"]').click();
+        //             }
+        //
+        //             // 执行锚点跳转，���保页面滚动到对应位置
+        //             const target = document.querySelector(element.getAttribute('href'));
+        //             if (target) {
+        //                 target.scrollIntoView({ behavior: "smooth" });
+        //             }
+        //         });
+        //     });
+        //
+        //
+        //     document.addEventListener('DOMContentLoaded', function() {
+        //         // 创建一个MutationObserver来监视Gradio组件的变化
+        //         const targetNode = gradioApp().querySelector('img[elem_id="image_output"]');
+        //
+        //         if (targetNode) {
+        //             const observer = new MutationObserver(function(mutationsList, observer) {
+        //                 for (const mutation of mutationsList) {
+        //                     if (mutation.type === 'attributes' && mutation.attributeName === 'src') {
+        //                         // 获取Gradio组件的src属性并设置到HTML img标签中
+        //                         const newSrc = targetNode.getAttribute('src');
+        //                         document.getElementById('result').src = newSrc;
+        //                     }
+        //                 }
+        //             });
+        //
+        //             // 开始观察Gradio组件的src属性变化
+        //             observer.observe(targetNode, { attributes: true });
+        //         }
+        //     });
 
 
             // // 绑定 "RUN" 按钮到 Gradio 的 submit_button
@@ -420,7 +174,7 @@
             //         reader.readAsDataURL(file);
             //     }
             // });
-        };
+        // };
     </script>
 
 </body>