diff --git a/src/main/java/com/enation/itbuilder/image2code/api/OpenAISourceListener.java b/src/main/java/com/enation/itbuilder/image2code/api/OpenAISourceListener.java index cbe9a23e7beae9595ab67c6c93ae315b3f42b861..dd23f65f434de8f1345ca2fc52b9bfdc9579c0e3 100644 --- a/src/main/java/com/enation/itbuilder/image2code/api/OpenAISourceListener.java +++ b/src/main/java/com/enation/itbuilder/image2code/api/OpenAISourceListener.java @@ -15,6 +15,7 @@ import org.springframework.web.socket.WebSocketSession; import java.io.IOException; /** + * OpenAI事件监听 * @author kingapex * @version 1.0 * @data 2022/12/23 12:02 @@ -25,8 +26,8 @@ public class OpenAISourceListener extends EventSourceListener { private WebSocketSession session; - public OpenAISourceListener( WebSocketSession session) { - this.session = session; + public OpenAISourceListener(WebSocketSession session) { + this.session = session; } private static ObjectMapper jsonObjMapper = new ObjectMapper(); @@ -41,6 +42,15 @@ public class OpenAISourceListener extends EventSourceListener { @Override public void onEvent(EventSource eventSource, String id, String type, String data) { if ("[DONE]".equals(data)) { + + try { + WsResponse complete = WsResponse.builder().status("complete").body("success").build(); + String jsonString = jsonObjMapper.writeValueAsString(complete); + + session.sendMessage(new TextMessage(jsonString)); + } catch (IOException e) { + throw new RuntimeException(e); + } return; } @@ -86,7 +96,7 @@ public class OpenAISourceListener extends EventSourceListener { if (StringUtils.hasText(responseData)) { OpenAiError openAiError = jsonObjMapper.readValue(responseData, OpenAiError.class); - WsResponse errorResponse = WsResponse.builder().status("errorResponse").body(openAiError.error.message).build(); + WsResponse errorResponse = WsResponse.builder().status("error").body(openAiError.error.message).build(); String jsonString = jsonObjMapper.writeValueAsString(errorResponse); session.sendMessage(new TextMessage(jsonString)); diff --git a/src/main/resources/static/image2code.js b/src/main/resources/static/image2code.js index af11960f8bb5380b79b9daec2a1ca23e63975711..e0f535156b5fb835e9eaaca496e9f46ca9bba4d6 100644 --- a/src/main/resources/static/image2code.js +++ b/src/main/resources/static/image2code.js @@ -2,8 +2,40 @@ var accumulatedHtml = ''; // 初始化累积的HTML var iframe ; +function addContent(text) { + var $div = $('.output'); + $div.text($div.text()+text); + $div.scrollLeft($div.prop('scrollWidth')); +} +function downloadHtml() { +// 假设你的HTML内容存储在pageHtml变量中 + + +// 创建一个新的blob对象 + var blob = new Blob([accumulatedHtml], {type: "text/html;charset=utf-8"}); + +// 创建一个新的a元素 + var a = document.createElement("a"); + +// 使用URL.createObjectURL()方法创建一个指向blob的URL + a.href = URL.createObjectURL(blob); + +// 设置下载的文件名 + a.download = "page.html"; + +// 添加a元素到文档 + document.body.appendChild(a); + +// 模拟点击a元素 + a.click(); + +// 移除a元素 + document.body.removeChild(a); + +} function receiveHtmlChar(char) { accumulatedHtml += char; // 将新字符追加到累积的HTML中 + addContent(char) if (accumulatedHtml.endsWith('>')) { updateIframeContent(); } @@ -36,8 +68,6 @@ const socket = new WebSocket(wsUrl); // 当连接成功建立的回调函数 socket.onopen = function(event) { console.log('连接已开启：', event); - // 你可以在这里发送消息给服务器 - // socket.send('你好，服务器！'); }; // 监听接收到的消息 @@ -49,11 +79,17 @@ socket.onmessage = function(event) { return } if (message.status === 'success') { + $(".output").show(); receiveHtmlChar( message.body); - }else { - alert(message.body); + } + if (message.status === 'complete') { + $(".menu").show(); + $('.output').hide(); } + if (message.status === 'error') { + alert(message.body); + } }; // 监听错误事件 @@ -143,4 +179,23 @@ $(function (){ }); + $("#downloadBtn").click(function (){ + downloadHtml(); + }); + + + $("#resetBtn").click(function (){ + $(".menu").hide(); + $('.output').hide(); + + $(".upload-area").show(); + $(".preview-block").hide() + $("#imagePreview").hide().attr("src","") + iframe.src = iframe.src; + }); + + + + + }); \ No newline at end of file diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html index 2edbeef0ea5aa3fb5116814ba438a4bad6438e1b..a1a40452799d5bc1bcab2528c80cd720db6fd8f2 100644 --- a/src/main/resources/static/index.html +++ b/src/main/resources/static/index.html @@ -9,7 +9,7 @@ - + @@ -109,9 +128,10 @@
-

Image to Code

+

Image to Code

- +
@@ -119,11 +139,33 @@ - Image preview... +
+
+
+
+ + +
+
+
-
+
Drag & drop a screenshot here,
or paste from clipboard,
or click to upload @@ -137,7 +179,6 @@
-