Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <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 ; | |
| 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: 21px ; | |
| margin-top: 10px; | |
| font-weight: bolder; | |
| } | |
| 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: 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 ; | |
| font-weight: bolder; | |
| } | |
| .examples p{ | |
| font-size: 18px ; | |
| font-weight: bolder; | |
| margin-top: 20px; | |
| margin-bottom: 40px ; | |
| } | |
| .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 ; | |
| 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; | |
| margin-bottom: 10px; | |
| } | |
| .step1{ | |
| display: flex; | |
| flex-direction: column; /* 按列布局 */ | |
| margin-top: 50px; | |
| } | |
| .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 ; | |
| } | |
| #image_input{ | |
| width: 100%; | |
| height: 750px; | |
| border: 2px solid rgb(40, 40, 40); | |
| border-radius: 5px; | |
| margin-top: 20px ; | |
| } | |
| </style> | |
| </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="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> | |
| <input type="file" accept="image/*" id="image-input" class="phone"> | |
| </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> | |
| <script> | |
| // window.onload = function() { | |
| // console.log("Gradio 页面加载完成"); | |
| // setTimeout(function() { | |
| // console.log(gradioApp()); | |
| // }, 1000); | |
| // }; | |
| window.onload = function() { | |
| alert("加载完了"); | |
| console.log(gradioApp()); // 这将输出gradioApp对象，查看其结构是否如预期 | |
| document.getElementById('eg1').onclick = function() { | |
| alert("点击"); | |
| console.log("hahahah"); | |
| const button = gradioApp().querySelector('button[gr-button-id="eg1_btn"]'); | |
| console.log(button); // 应该输出相应的按钮元素 | |
| button.click(); // 模拟点击 | |
| }; | |
| document.getElementById('eg1').onclick = function() { | |
| gradioApp().querySelector('button[gr-button-id="eg1_btn"]').click(); | |
| }; | |
| document.getElementById('eg2').onclick = function() { | |
| gradioApp().querySelector('button[gr-button-id="eg2_btn"]').click(); | |
| }; | |
| document.getElementById('eg3').onclick = function() { | |
| gradioApp().querySelector('button[gr-button-id="eg3_btn"]').click(); | |
| }; | |
| console.log(gradioApp()); // 这将输出gradioApp对象，查看其结构是否如预期 | |
| }; | |
| // 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 | |
| // 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> |