change to html

.idea/workspace.xml

@@ -4,7 +4,9 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="5e4481c0-7ba2-42e4-bbe6-4c36a0d36baa" name="Changes" comment="test auto delete">
+    <list default="true" id="5e4481c0-7ba2-42e4-bbe6-4c36a0d36baa" name="Changes" comment="complete log part">
+      <change afterPath="$PROJECT_DIR$/layout/web_page.css" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/layout/web_page.html" afterDir="false" />
       <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" />
     </list>
@@ -17,6 +19,7 @@
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="Python Script" />
+        <option value="HTML File" />
       </list>
     </option>
   </component>
@@ -31,20 +34,22 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&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)",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="RecentsManager">
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$/web_design" />
       <recent name="$PROJECT_DIR$/google_drive_credentials" />
       <recent name="$PROJECT_DIR$" />
     </key>
@@ -59,7 +64,7 @@
       <updated>1723386888312</updated>
       <workItem from="1723386893769" duration="12000" />
       <workItem from="1723386970626" duration="451000" />
-      <workItem from="1723387453009" duration="13563000" />
+      <workItem from="1723387453009" duration="19315000" />
     </task>
     <task id="LOCAL-00001" summary="create">
       <created>1723387548126</created>
@@ -166,7 +171,21 @@
       <option name="project" value="LOCAL" />
       <updated>1723458694930</updated>
     </task>
-    <option name="localTasksCounter" value="16" />
+    <task id="LOCAL-00016" summary="test auto monitor">
+      <created>1723461444926</created>
+      <option name="number" value="00016" />
+      <option name="presentableId" value="LOCAL-00016" />
+      <option name="project" value="LOCAL" />
+      <updated>1723461444926</updated>
+    </task>
+    <task id="LOCAL-00017" summary="complete log part">
+      <created>1723462386739</created>
+      <option name="number" value="00017" />
+      <option name="presentableId" value="LOCAL-00017" />
+      <option name="project" value="LOCAL" />
+      <updated>1723462386739</updated>
+    </task>
+    <option name="localTasksCounter" value="18" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -180,6 +199,8 @@
     <MESSAGE value="debug" />
     <MESSAGE value="google drive" />
     <MESSAGE value="test auto delete" />
-    <option name="LAST_COMMIT_MESSAGE" value="test auto delete" />
+    <MESSAGE value="test auto monitor" />
+    <MESSAGE value="complete log part" />
+    <option name="LAST_COMMIT_MESSAGE" value="complete log part" />
   </component>
 </project>

app.py

@@ -309,41 +309,53 @@ def new_example_inference_3():
 #     complete_result_dataframe.visible = not complete_result_dataframe.visible
 
 
-demo = gr.Blocks()
-with demo:
-    gr.Markdown("# Cpp4App\n\n**Automated Contextual Privacy Policies Generation for Mobile Apps**"
-                "\n\nThere are two inputs to generate CPP for a mobile app: app's privacy policy URL link and a GUI screenshot")
+with open('layout/web_page.html', 'r', encoding='utf-8') as file:
+    html_content = file.read()
 
-    with gr.Row():
-        example_image_1 = gr.Image(value="examples/6-8.jpg", label="Example 1")
-        example_image_2 = gr.Image(value="examples/11-9.jpg", label="Example 2")
-        example_image_3 = gr.Image(value="examples/1-1.jpg", label="Example 3")
-        with gr.Column():
-            gr.Markdown("**You can try with three examples we provided:**"
-                        "\n\n- WhatsApp"
-                        "\n\n- Snap"
-                        "\n\n- Mcdonald's"
-                        "\n\n**You can also try with your own example:**"
-                        "\n\nUpload the screenshot and privacy policy URL link, then click 'submit' button"
-                        # "\n\n"
-                        # "\n\nThe three provided examples are pre-run, while your own screenshot needs to run for approximately one minute."
-                        )
+with gr.Blocks() as demo:
+    gr.HTML(html_content)
 
-    with gr.Row():
-        example_button_1 = gr.Button("Run with Example 1")
-        example_button_2 = gr.Button("Run with Example 2")
-        example_button_3 = gr.Button("Run with Example 3")
-        with gr.Column():
-            clear_button = gr.Button("Clear")
-            submit_button = gr.Button("Submit")
+    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="example4", visible=False)
 
-    with gr.Row():
-        text_input = gr.Textbox(label="URL Input for the Privacy Policy of the App")
+    clear_button = gr.Button("Clear", elem_id="clear", visible=False)
+    submit_button = gr.Button("Submit", elem_id="submit", visible=False)
+
+    text_input = gr.Textbox(label="URL Input for the Privacy Policy of the App", elem_id="text_input", visible=False)
+    image_input = gr.Image(type="pil", label="Screenshot Upload", elem_id="image_input", visible=False)
+    result_image = gr.Image(type="pil", label="Result Screenshot", elem_id="image_output", visible=False)
+
+    # with gr.Row():
+    #     example_image_1 = gr.Image(value="examples/6-8.jpg", label="Example 1")
+    #     example_image_2 = gr.Image(value="examples/11-9.jpg", label="Example 2")
+    #     example_image_3 = gr.Image(value="examples/1-1.jpg", label="Example 3")
+    #     with gr.Column():
+    #         gr.Markdown("**You can try with three examples we provided:**"
+    #                     "\n\n- WhatsApp"
+    #                     "\n\n- Snap"
+    #                     "\n\n- Mcdonald's"
+    #                     "\n\n**You can also try with your own example:**"
+    #                     "\n\nUpload the screenshot and privacy policy URL link, then click 'submit' button"
+    #                     # "\n\n"
+    #                     # "\n\nThe three provided examples are pre-run, while your own screenshot needs to run for approximately one minute."
+    #                     )
 
-        with gr.Column():
-            image_input = gr.Image(type="pil", label="Screenshot Upload")
-        result_image = gr.Image(type="pil", label="Result Screenshot")
+    # with gr.Row():
+    #     example_button_1 = gr.Button("Run with Example 1")
+    #     example_button_2 = gr.Button("Run with Example 2")
+    #     example_button_3 = gr.Button("Run with Example 3")
+    #     with gr.Column():
+    #         clear_button = gr.Button("Clear")
+    #         submit_button = gr.Button("Submit")
 
+    # with gr.Row():
+    #     text_input = gr.Textbox(label="URL Input for the Privacy Policy of the App", elem_id="text_input", visible=False)
+    #
+    #     with gr.Column():
+    #         image_input = gr.Image(type="pil", label="Screenshot Upload")
+    #     result_image = gr.Image(type="pil", label="Result Screenshot")
+    #
     with gr.Row():
         result_dataframe = gr.Dataframe(type="pandas", label="Result Excel (Summarized)")
 
@@ -377,13 +389,13 @@ with demo:
     submit_button.click(inference, inputs=[image_input, text_input], outputs=[result_image, result_dataframe, complete_result_dataframe])
     clear_button.click(lambda: [None, None, None, None, None, None], inputs=[], outputs=[image_input, text_input, result_image, result_dataframe, complete_result_dataframe])
     # example_button.click(example_inference, inputs=[], outputs=[image_input, text_input, result_image, result_dataframe])
-    example_button_1.click(new_example_inference_1,
+    eg_btn1.click(new_example_inference_1,
                            inputs=[],
                            outputs=[image_input, text_input, result_image, result_dataframe, complete_result_dataframe])
-    example_button_2.click(new_example_inference_2,
+    eg_btn2.click(new_example_inference_2,
                            inputs=[],
                            outputs=[image_input, text_input, result_image, result_dataframe, complete_result_dataframe])
-    example_button_3.click(new_example_inference_3,
+    eg_btn3.click(new_example_inference_3,
                            inputs=[],
                            outputs=[image_input, text_input, result_image, result_dataframe, complete_result_dataframe])
 

layout/web_page.css

@@ -0,0 +1,237 @@
+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;
+    flex-direction: column; /* 按列布局 */
+    align-items: center;
+    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;
+    padding-right: 120px;
+    box-sizing: border-box;
+}
+
+.title_half p{
+    font-size: 22px;
+    font-weight: bolder;
+    margin-top: -10px;
+}
+
+h1{
+    font-size: 80px;
+    font-weight: bolder;
+}
+
+.choice{
+    display: flex;
+    width: 100%;
+    height: 80px;
+    margin-top: 50px;
+}
+
+.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;
+    margin-right: 20px;
+    text-decoration: none;
+}
+
+.start:hover{
+    background-color: rgb(117, 209, 255);
+}
+
+.view_examples{
+    color: rgb(40, 40, 40);
+}
+
+.view_examples:hover{
+    color: rgb(24, 157, 246);
+}
+
+.examples{
+    width: 84%;
+    margin-top: 80px;
+}
+
+.head{
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+h2{
+    font-size: 47px;
+    font-weight: bolder;
+}
+
+.examples p{
+    font-size: 18px;
+    font-weight: bolder;
+    margin-top: -10px;
+    margin-bottom: 50px;
+}
+
+.img_box{
+    display: flex;
+    justify-content: space-between;
+}
+
+.eg{
+    width: 25%;
+}
+
+.eg img{
+    width: 100%;
+    height: auto;
+    border: 3px solid rgb(188, 204, 212);
+    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: 84%;
+    margin-top: 80px;
+    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: 2px;
+    cursor: pointer;
+}
+
+.run{
+    color: white;
+    background-color: rgb(40, 40, 40);
+}
+
+.btn:hover{
+    color: white;
+    background-color: rgb(117, 209, 255);
+    border: white;
+}
+
+.space{
+    width: 80%;
+}
+
+label{
+    font-size: 18px;
+    font-weight: bolder;
+}
+
+.step1{
+    display: flex;
+    flex-direction: column; /* 按列布局 */
+    margin-top: 30px;
+}
+
+.url{
+    height: 50px;
+    margin-top: 20px;
+    margin-bottom: 100px;
+    font-size: 20px;
+    color: rgb(194, 194, 194);
+    padding-left: 10px;
+    border: 2px solid rgb(40, 40, 40);
+    border-radius: 5px;
+}
+
+.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;
+}

layout/web_page.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Cpp4App Test</title>
+    <link rel="stylesheet" type="text/css" href="web_page.css">
+</head>
+<body>
+
+    <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="images/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"><img src="images/eg1.jpg" alt=""></a>
+                <p>· WhatsApp</p>
+            </div>
+            <div class="eg">
+                <a href="#step2"><img src="images/eg2.jpg" alt=""></a>
+                <p>· Snap</p>
+            </div>
+            <div class="eg">
+                <a href="#step2"><img src="images/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>
+                    <input type="file" accept="image/*" id="image-input" class="phone">
+                </div>
+                <div class="point"><img src="images/point.png" alt=""></div>
+                <div class="img">
+                    <label for="output">Outcome :</label>
+                    <div class="phone" id="output">
+                        <img src="" alt="">
+                        <div class="left next_btn"></div>
+                        <div class="right next_btn"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // 监听示例图片的点击事件
+        document.querySelectorAll('.eg a').forEach(function(element) {
+            element.addEventListener('click', function(event) {
+                event.preventDefault();  // 阻止默认行为
+
+                // 根据点击的图片选择运行不同的 Gradio 函数
+                const exampleIndex = Array.from(element.parentElement.parentElement.children).indexOf(element.parentElement) + 1;
+                if (exampleIndex === 1) {
+                    gradioApp().querySelector('button[gr-button-id="example1"]').click();
+                } else if (exampleIndex === 2) {
+                    gradioApp().querySelector('button[gr-button-id="example2"]').click();
+                } else if (exampleIndex === 3) {
+                    gradioApp().querySelector('button[gr-button-id="example3"]').click();
+                }
+            });
+        });
+
+        // 绑定 "RUN" 按钮到 Gradio 的 submit_button
+        document.querySelector('input.btn.run').addEventListener('click', function(event) {
+            event.preventDefault();  // 阻止表单默认提交行为
+            gradioApp().querySelector('button[gr-button-id="submit_button"]').click();
+        });
+
+        // 绑定 "RESET" 按钮到 Gradio 的 clear_button
+        document.querySelector('button.btn.reset').addEventListener('click', function() {
+            gradioApp().querySelector('button[gr-button-id="clear_button"]').click();
+        });
+
+        // 监听 URL 输入框的输入事件
+        document.querySelector('#inputBox').addEventListener('input', function(event) {
+            const grInput = gradioApp().querySelector('textarea#text_input');
+            grInput.value = event.target.value;
+
+            // 手动触发 Gradio 输入框的事件
+            const inputEvent = new Event('input', { bubbles: true });
+            grInput.dispatchEvent(inputEvent);
+        });
+
+        // 监听图片上传的文件选择事件
+        document.querySelector('#image-input').addEventListener('change', function(event) {
+            const file = event.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    const img = new Image();
+                    img.src = e.target.result;
+
+                    img.onload = function() {
+                        const canvas = document.createElement('canvas');
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        const ctx = canvas.getContext('2d');
+                        ctx.drawImage(img, 0, 0);
+
+                        // 获取图像的 DataURL 并设置为 Gradio 的隐藏输入框值
+                        const dataURL = canvas.toDataURL('image/png');
+                        const grImageInput = gradioApp().querySelector('textarea#image_input');
+                        grImageInput.value = dataURL;
+
+                        // 手动触发 Gradio 输入框的事件
+                        const inputEvent = new Event('input', { bubbles: true });
+                        grImageInput.dispatchEvent(inputEvent);
+                    };
+                };
+                reader.readAsDataURL(file);
+            }
+        });
+    </script>
+
+</body>
+</html>