From 744b544aea8a299bd09c63e94103a2553cdeed15 Mon Sep 17 00:00:00 2001 From: Cunninger <1803912219@qq.com> Date: Sat, 18 Jan 2025 12:24:09 +0800 Subject: [PATCH] feat: add URL input button for image support on main interface --- worker.js | 138 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 133 insertions(+), 5 deletions(-) diff --git a/worker.js b/worker.js index 8c15e21..b6ebe77 100644 --- a/worker.js +++ b/worker.js @@ -1002,6 +1002,28 @@ function getHTML() { ' .powered-by a:hover {', ' color: #2980b9;', ' }', + + ' /* 输入控件组样式 */', + ' .input-controls {', + ' margin-top: 15px;', + ' width: 100%;', + ' }', + + ' .button-group {', + ' display: flex;', + ' gap: 10px;', + ' margin-top: 10px;', + ' justify-content: center;', + ' }', + + ' #urlInput {', + ' width: 100%;', + ' padding: 10px;', + ' border: 1px solid #dcdde1;', + ' border-radius: 8px;', + ' resize: none;', + ' font-size: 14px;', + ' }', '', '', '', @@ -1025,11 +1047,17 @@ function getHTML() { '
', '📸', '
', - '拖拽图片到这里，点击上传，或粘贴Base64图片内容
', - '支持复制粘贴图片', + '拖拽图片到这里，点击上传，或粘贴图片/Base64/URL
', + '支持多种输入方式', '
', + '
', '', - '', + '', + '
', + '', + '', + '
', + '
', '', '
', '
', @@ -1545,11 +1573,111 @@ function getHTML() { ' historyManager.displayHistory(currentToken);', ' }', ' }', + + ' // URL输入相关功能', + ' const urlInput = document.getElementById(\'urlInput\');', + ' const toggleUrl = document.getElementById(\'toggleUrl\');', + + ' // 切换URL输入框显示', + ' toggleUrl.addEventListener(\'click\', (e) => {', + ' e.stopPropagation();', + ' if (urlInput.style.display === \'none\') {', + ' urlInput.style.display = \'block\';', + ' base64Input.style.display = \'none\';', + ' toggleUrl.textContent = \'隐藏URL输入\';', + ' toggleBase64.textContent = \'Base64输入\';', + ' } else {', + ' urlInput.style.display = \'none\';', + ' toggleUrl.textContent = \'URL输入\';', + ' }', + ' });', + + ' // 为urlInput添加阻止事件冒泡', + ' urlInput.addEventListener(\'click\', (e) => {', + ' e.stopPropagation();', + ' });', + + ' // URL输入处理', + ' urlInput.addEventListener(\'input\', debounce(async (e) => {', + ' e.stopPropagation();', + ' const imageUrl = urlInput.value.trim();', + ' if (imageUrl) {', + ' try {', + ' if (!currentToken) {', + ' throw new Error(\'请先设置Token\');', + ' }', + + ' // 显示加载动画', + ' loading.style.display = \'block\';', + ' resultContainer.classList.remove(\'show\');', + + ' // 调用URL识别API', + ' const response = await fetch(\'/api/recognize/url\', {', + ' method: \'POST\',', + ' headers: { \'Content-Type\': \'application/json\' },', + ' body: JSON.stringify({', + ' token: currentToken,', + ' imageUrl: imageUrl', + ' })', + ' });', + + ' const data = await response.json();', + ' if (!data.success) {', + ' throw new Error(data.error || \'识别失败\');', + ' }', + + ' // 显示预览图', + ' previewImage.src = imageUrl;', + ' previewImage.style.display = \'block\';', + + ' // 显示结果', + ' const result = data.result;', + ' resultDiv.setAttribute(\'data-original-text\', result);', + ' resultDiv.innerHTML = result;', + ' waitForMathJax(() => {', + ' try {', + ' MathJax.typesetPromise([resultDiv])', + ' .then(() => {', + ' resultContainer.classList.add(\'show\');', + ' })', + ' .catch(err => {', + ' console.error("MathJax渲染错误:", err);', + ' resultContainer.classList.add(\'show\');', + ' });', + ' } catch (err) {', + ' console.error("MathJax处理错误:", err);', + ' resultContainer.classList.add(\'show\');', + ' }', + ' });', + + ' // 添加到历史记录', + ' historyManager.addHistory(currentToken, imageUrl, result);', + ' } catch (error) {', + ' resultDiv.textContent = \'处理失败: \' + error.message;', + ' resultContainer.classList.add(\'show\');', + ' console.error(\'URL处理错误:\', error);', + ' } finally {', + ' loading.style.display = \'none\';', + ' }', + ' }', + ' }, 1000));', // 1秒防抖', + + ' // 防抖函数', + ' function debounce(func, wait) {', + ' let timeout;', + ' return function executedFunction(...args) {', + ' const later = () => {', + ' clearTimeout(timeout);', + ' func(...args);', + ' };', + ' clearTimeout(timeout);', + ' timeout = setTimeout(later, wait);', + ' };', + ' }', '', '', '' ].join('\n'); return html; -} - +} \ No newline at end of file