shen/Snap-Solver
1
0
Fork 0
mirror of https://github.com/Zippland/Snap-Solver.git synced 2026-02-06 16:02:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

ocr

Browse Source
This commit is contained in:
Zylan
2025-02-04 05:17:14 +08:00
parent a77de38533
commit 75d6ff2c40
11 changed files with 641 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
static/js/main.js
View File

@@ -4,6 +4,7 @@ class SnapSolver {
this.initializeState();
this.setupEventListeners();
this.initializeConnection();
this.setupAutoScroll();
// Initialize managers
window.uiManager = new UIManager();
@@ -19,8 +20,13 @@ class SnapSolver {
this.cropContainer = document.getElementById('cropContainer');
this.imagePreview = document.getElementById('imagePreview');
this.sendToClaudeBtn = document.getElementById('sendToClaude');
this.extractTextBtn = document.getElementById('extractText');
this.textEditor = document.getElementById('textEditor');
this.extractedText = document.getElementById('extractedText');
this.sendExtractedTextBtn = document.getElementById('sendExtractedText');
this.responseContent = document.getElementById('responseContent');
this.claudePanel = document.getElementById('claudePanel');
this.statusLight = document.querySelector('.status-light');
}
initializeState() {
@@ -30,6 +36,27 @@ class SnapSolver {
this.history = JSON.parse(localStorage.getItem('snapHistory') || '[]');
}
setupAutoScroll() {
// Create MutationObserver to watch for content changes
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'characterData' || mutation.type === 'childList') {
this.responseContent.scrollTo({
top: this.responseContent.scrollHeight,
behavior: 'smooth'
});
}
});
});
// Start observing the response content
observer.observe(this.responseContent, {
childList: true,
characterData: true,
subtree: true
});
}
updateConnectionStatus(connected) {
this.connectionStatus.textContent = connected ? 'Connected' : 'Disconnected';
this.connectionStatus.className = `status ${connected ? 'connected' : 'disconnected'}`;
@@ -39,6 +66,27 @@ class SnapSolver {
this.imagePreview.classList.add('hidden');
this.cropBtn.classList.add('hidden');
this.sendToClaudeBtn.classList.add('hidden');
this.extractTextBtn.classList.add('hidden');
this.textEditor.classList.add('hidden');
}
}
updateStatusLight(status) {
this.statusLight.className = 'status-light';
switch (status) {
case 'started':
case 'streaming':
this.statusLight.classList.add('processing');
break;
case 'completed':
this.statusLight.classList.add('completed');
break;
case 'error':
this.statusLight.classList.add('error');
break;
default:
// Reset to default state
break;
}
}
@@ -68,6 +116,7 @@ class SnapSolver {
}
setupSocketEventHandlers() {
// Screenshot response handler
this.socket.on('screenshot_response', (data) => {
if (data.success) {
this.screenshotImg.src = `data:image/png;base64,${data.image}`;
@@ -76,6 +125,8 @@ class SnapSolver {
this.captureBtn.disabled = false;
this.captureBtn.innerHTML = '<i class="fas fa-camera"></i><span>Capture</span>';
this.sendToClaudeBtn.classList.add('hidden');
this.extractTextBtn.classList.add('hidden');
this.textEditor.classList.add('hidden');
window.showToast('Screenshot captured successfully');
} else {
window.showToast('Failed to capture screenshot: ' + data.error, 'error');
@@ -84,58 +135,61 @@ class SnapSolver {
}
});
// Text extraction response handler
this.socket.on('text_extraction_response', (data) => {
if (data.success) {
this.extractedText.value = data.text;
this.textEditor.classList.remove('hidden');
window.showToast('Text extracted successfully');
} else {
window.showToast('Failed to extract text: ' + data.error, 'error');
}
this.extractTextBtn.disabled = false;
this.extractTextBtn.innerHTML = '<i class="fas fa-font"></i><span>Extract Text</span>';
});
this.socket.on('claude_response', (data) => {
console.log('Received claude_response:', data);
this.updateStatusLight(data.status);
switch (data.status) {
case 'started':
console.log('Analysis started');
this.responseContent.textContent = 'Starting analysis...\n';
this.responseContent.textContent = '';
this.sendToClaudeBtn.disabled = true;
this.sendExtractedTextBtn.disabled = true;
break;
case 'streaming':
if (data.content) {
console.log('Received content:', data.content);
if (this.responseContent.textContent === 'Starting analysis...\n') {
this.responseContent.textContent = data.content;
} else {
this.responseContent.textContent += data.content;
}
this.responseContent.scrollTo({
top: this.responseContent.scrollHeight,
behavior: 'smooth'
});
this.responseContent.textContent += data.content;
}
break;
case 'completed':
console.log('Analysis completed');
this.responseContent.textContent += '\n\nAnalysis complete.';
this.sendToClaudeBtn.disabled = false;
this.sendExtractedTextBtn.disabled = false;
this.addToHistory(this.croppedImage, this.responseContent.textContent);
window.showToast('Analysis completed successfully');
this.responseContent.scrollTo({
top: this.responseContent.scrollHeight,
behavior: 'smooth'
});
break;
case 'error':
console.error('Claude analysis error:', data.error);
const errorMessage = data.error || 'Unknown error occurred';
this.responseContent.textContent += '\n\nError: ' + errorMessage;
this.responseContent.textContent += '\nError: ' + errorMessage;
this.sendToClaudeBtn.disabled = false;
this.responseContent.scrollTop = this.responseContent.scrollHeight;
this.sendExtractedTextBtn.disabled = false;
window.showToast('Analysis failed: ' + errorMessage, 'error');
break;
default:
console.warn('Unknown response status:', data.status);
if (data.error) {
this.responseContent.textContent += '\n\nError: ' + data.error;
this.responseContent.textContent += '\nError: ' + data.error;
this.sendToClaudeBtn.disabled = false;
this.responseContent.scrollTop = this.responseContent.scrollHeight;
this.sendExtractedTextBtn.disabled = false;
window.showToast('Unknown error occurred', 'error');
}
}
@@ -170,8 +224,8 @@ class SnapSolver {
this.cropper = new Cropper(clonedImage, {
viewMode: 1,
dragMode: 'move',
autoCropArea: 0.8,
dragMode: 'crop',
autoCropArea: 0,
restore: false,
modal: true,
guides: true,
@@ -179,10 +233,8 @@ class SnapSolver {
cropBoxMovable: true,
cropBoxResizable: true,
toggleDragModeOnDblclick: false,
minContainerWidth: 800,
minContainerHeight: 600,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
minCropBoxWidth: 50,
minCropBoxHeight: 50,
background: true,
responsive: true,
checkOrientation: true,
@@ -213,6 +265,13 @@ class SnapSolver {
}
setupEventListeners() {
this.setupCaptureEvents();
this.setupCropEvents();
this.setupAnalysisEvents();
this.setupKeyboardShortcuts();
}
setupCaptureEvents() {
// Capture button
this.captureBtn.addEventListener('click', async () => {
if (!this.socket || !this.socket.connected) {
@@ -230,7 +289,9 @@ class SnapSolver {
this.captureBtn.innerHTML = '<i class="fas fa-camera"></i><span>Capture</span>';
}
});
}
setupCropEvents() {
// Crop button
this.cropBtn.addEventListener('click', () => {
if (this.screenshotImg.src) {
@@ -264,11 +325,11 @@ class SnapSolver {
// Get cropped canvas with more conservative size limits
console.log('Getting cropped canvas...');
const canvas = this.cropper.getCroppedCanvas({
maxWidth: 1280,
maxHeight: 720,
maxWidth: 2560,
maxHeight: 1440,
fillColor: '#fff',
imageSmoothingEnabled: true,
imageSmoothingQuality: 'low',
imageSmoothingQuality: 'high',
});
if (!canvas) {
@@ -280,23 +341,28 @@ class SnapSolver {
// Convert to data URL with error handling and compression
console.log('Converting to data URL...');
try {
// Use lower quality for JPEG to reduce size
this.croppedImage = canvas.toDataURL('image/jpeg', 0.6);
// Use PNG for better quality
this.croppedImage = canvas.toDataURL('image/png');
console.log('Data URL conversion successful');
} catch (dataUrlError) {
console.error('Data URL conversion error:', dataUrlError);
throw new Error('Failed to process cropped image. The image might be too large or memory insufficient.');
}
// Properly destroy the cropper instance
this.cropper.destroy();
this.cropper = null;
// Clean up cropper and update UI
this.cropContainer.classList.add('hidden');
document.querySelector('.crop-area').innerHTML = '';
this.settingsPanel.classList.add('hidden');
// Update the screenshot image with the cropped version
this.screenshotImg.src = this.croppedImage;
this.imagePreview.classList.remove('hidden');
this.cropBtn.classList.remove('hidden');
this.sendToClaudeBtn.classList.remove('hidden');
this.extractTextBtn.classList.remove('hidden');
window.showToast('Image cropped successfully');
} catch (error) {
console.error('Cropping error details:', {
@@ -305,7 +371,12 @@ class SnapSolver {
cropperState: this.cropper ? 'initialized' : 'not initialized'
});
window.showToast(error.message || 'Error while cropping image', 'error');
return; // Exit the function to prevent cleanup if error occurs
} finally {
// Always clean up the cropper instance
if (this.cropper) {
this.cropper.destroy();
this.cropper = null;
}
}
}
});
@@ -318,8 +389,72 @@ class SnapSolver {
}
this.cropContainer.classList.add('hidden');
this.sendToClaudeBtn.classList.add('hidden');
this.extractTextBtn.classList.add('hidden');
document.querySelector('.crop-area').innerHTML = '';
});
}
setupAnalysisEvents() {
// Extract Text button
this.extractTextBtn.addEventListener('click', () => {
if (!this.croppedImage) {
window.showToast('Please crop the image first', 'error');
return;
}
this.extractTextBtn.disabled = true;
this.extractTextBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i><span>Extracting...</span>';
try {
this.socket.emit('extract_text', {
image: this.croppedImage.split(',')[1]
});
} catch (error) {
window.showToast('Failed to extract text: ' + error.message, 'error');
this.extractTextBtn.disabled = false;
this.extractTextBtn.innerHTML = '<i class="fas fa-font"></i><span>Extract Text</span>';
}
});
// Send Extracted Text button
this.sendExtractedTextBtn.addEventListener('click', () => {
const text = this.extractedText.value.trim();
if (!text) {
window.showToast('Please enter some text', 'error');
return;
}
const settings = window.settingsManager.getSettings();
const apiKey = window.settingsManager.getApiKey();
if (!apiKey) {
this.settingsPanel.classList.remove('hidden');
return;
}
this.claudePanel.classList.remove('hidden');
this.responseContent.textContent = '';
this.sendExtractedTextBtn.disabled = true;
try {
this.socket.emit('analyze_text', {
text: text,
settings: {
apiKey: apiKey,
model: settings.model || 'claude-3-5-sonnet-20241022',
temperature: parseFloat(settings.temperature) || 0.7,
systemPrompt: settings.systemPrompt || 'You are an expert at analyzing questions and providing detailed solutions.',
proxyEnabled: settings.proxyEnabled || false,
proxyHost: settings.proxyHost || '127.0.0.1',
proxyPort: settings.proxyPort || '4780'
}
});
} catch (error) {
this.responseContent.textContent = 'Error: Failed to send text for analysis - ' + error.message;
this.sendExtractedTextBtn.disabled = false;
window.showToast('Failed to send text for analysis', 'error');
}
});
// Send to Claude button
this.sendToClaudeBtn.addEventListener('click', () => {
@@ -337,7 +472,7 @@ class SnapSolver {
}
this.claudePanel.classList.remove('hidden');
this.responseContent.textContent = 'Preparing to analyze image...\n';
this.responseContent.textContent = '';
this.sendToClaudeBtn.disabled = true;
try {
@@ -354,12 +489,14 @@ class SnapSolver {
}
});
} catch (error) {
this.responseContent.textContent += '\nError: Failed to send image for analysis - ' + error.message;
this.responseContent.textContent = 'Error: Failed to send image for analysis - ' + error.message;
this.sendToClaudeBtn.disabled = false;
window.showToast('Failed to send image for analysis', 'error');
}
});
}
setupKeyboardShortcuts() {
// Keyboard shortcuts for capture and crop
document.addEventListener('keydown', (e) => {
if (e.ctrlKey || e.metaKey) {
@@ -430,6 +567,7 @@ window.renderHistory = function() {
window.app.cropBtn.classList.add('hidden');
window.app.captureBtn.classList.add('hidden');
window.app.sendToClaudeBtn.classList.add('hidden');
window.app.extractTextBtn.classList.add('hidden');
if (historyItem.response) {
window.app.claudePanel.classList.remove('hidden');
window.app.responseContent.textContent = historyItem.response;

16
static/js/settings.js
View File

@@ -12,6 +12,7 @@ class SettingsManager {
this.temperatureInput = document.getElementById('temperature');
this.temperatureValue = document.getElementById('temperatureValue');
this.systemPromptInput = document.getElementById('systemPrompt');
this.languageInput = document.getElementById('language');
this.proxyEnabledInput = document.getElementById('proxyEnabled');
this.proxyHostInput = document.getElementById('proxyHost');
this.proxyPortInput = document.getElementById('proxyPort');
@@ -67,6 +68,7 @@ class SettingsManager {
this.temperatureInput.value = settings.temperature;
this.temperatureValue.textContent = settings.temperature;
}
if (settings.language) this.languageInput.value = settings.language;
if (settings.systemPrompt) this.systemPromptInput.value = settings.systemPrompt;
if (settings.proxyEnabled !== undefined) {
this.proxyEnabledInput.checked = settings.proxyEnabled;
@@ -89,6 +91,7 @@ class SettingsManager {
apiKeys: {},
model: this.modelSelect.value,
temperature: this.temperatureInput.value,
language: this.languageInput.value,
systemPrompt: this.systemPromptInput.value,
proxyEnabled: this.proxyEnabledInput.checked,
proxyHost: this.proxyHostInput.value,
@@ -118,6 +121,18 @@ class SettingsManager {
return apiKey;
}
getSettings() {
return {
model: this.modelSelect.value,
temperature: this.temperatureInput.value,
language: this.languageInput.value,
systemPrompt: this.systemPromptInput.value + ` Please respond in ${this.languageInput.value}.`,
proxyEnabled: this.proxyEnabledInput.checked,
proxyHost: this.proxyHostInput.value,
proxyPort: this.proxyPortInput.value
};
}
setupEventListeners() {
// Save settings on change
Object.values(this.apiKeyInputs).forEach(input => {
@@ -135,6 +150,7 @@ class SettingsManager {
});
this.systemPromptInput.addEventListener('change', () => this.saveSettings());
this.languageInput.addEventListener('change', () => this.saveSettings());
this.proxyEnabledInput.addEventListener('change', (e) => {
this.proxySettings.style.display = e.target.checked ? 'block' : 'none';
this.saveSettings();

98
static/style.css
View File

@@ -145,20 +145,64 @@ body {
}
.toolbar-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min-content, max-content));
gap: 1rem;
justify-content: start;
display: flex;
justify-content: flex-start;
align-items: center;
}
.button-group {
display: flex;
gap: 0.5rem;
align-items: center;
}
.analysis-button {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-top: 1rem;
padding: 1rem;
}
.analysis-button .button-group {
display: flex;
gap: 0.5rem;
width: 100%;
max-width: 400px;
justify-content: center;
}
.text-editor {
width: 100%;
max-width: 600px;
display: flex;
flex-direction: column;
gap: 1rem;
}
.text-editor textarea {
width: 100%;
min-height: 120px;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: 0.375rem;
background-color: var(--background);
color: var(--text-primary);
font-size: 0.9375rem;
resize: vertical;
}
.text-editor textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}
.text-editor button {
align-self: flex-end;
}
.image-preview {
position: relative;
border-radius: 0.5rem;
@@ -207,11 +251,55 @@ body {
margin-bottom: 1rem;
}
.header-title {
display: flex;
align-items: center;
gap: 0.75rem;
}
.panel-header h2 {
font-size: 1.25rem;
color: var(--text-primary);
}
.analysis-status {
display: flex;
align-items: center;
}
.status-light {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: var(--text-secondary);
transition: background-color 0.3s ease;
}
.status-light.processing {
background-color: #ffd700;
animation: pulse 1.5s infinite;
}
.status-light.completed {
background-color: var(--success-color);
}
.status-light.error {
background-color: var(--error-color);
}
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
.response-content {
flex: 1;
overflow-y: auto;