feat: add URL input button for image support on main interface
This commit is contained in:
Cunninger
parent
4ba70a858f
commit
744b544aea
138
worker.js
138
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;',
|
||||
' }',
|
||||
'</style>',
|
||||
'</head>',
|
||||
'<body>',
|
||||
@ -1025,11 +1047,17 @@ function getHTML() {
|
||||
'<div class="upload-area" id="uploadArea">',
|
||||
'<i>📸</i>',
|
||||
'<div class="upload-text">',
|
||||
'拖拽图片到这里，点击上传，或粘贴Base64图片内容<br>',
|
||||
'支持复制粘贴图片',
|
||||
'拖拽图片到这里，点击上传，或粘贴图片/Base64/URL<br>',
|
||||
'支持多种输入方式',
|
||||
'</div>',
|
||||
'<div class="input-controls">',
|
||||
'<textarea id="base64Input" placeholder="在此输入Base64格式的图片内容..." style="display: none; width: 100%; height: 100px; margin-top: 10px;"></textarea>',
|
||||
'<button id="toggleBase64" class="toggle-btn" style="margin-top: 10px;">切换Base64输入</button>',
|
||||
'<textarea id="urlInput" placeholder="在此输入图片URL..." style="display: none; width: 100%; height: 40px; margin-top: 10px;"></textarea>',
|
||||
'<div class="button-group">',
|
||||
'<button id="toggleBase64" class="toggle-btn">Base64输入</button>',
|
||||
'<button id="toggleUrl" class="toggle-btn">URL输入</button>',
|
||||
'</div>',
|
||||
'</div>',
|
||||
'<img id="previewImage" class="preview-image">',
|
||||
'</div>',
|
||||
'<div class="loading" id="loading"></div>',
|
||||
@ -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);',
|
||||
' };',
|
||||
' }',
|
||||
'</script>',
|
||||
'</body>',
|
||||
'</html>'
|
||||
].join('\n');
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user