Spaces:

gojiteji
/

anycoder-9f5b41c7

Running

App Files Files Community

gojiteji commited on Jan 20

Commit

6e37400

verified ·

1 Parent(s): 8baa68c

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +773 -19

index.html CHANGED Viewed

@@ -1,19 +1,773 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Medical Transcription Editor</title>
+    <!-- FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #2563eb;
+            --primary-hover: #1d4ed8;
+            --secondary-color: #64748b;
+            --background-color: #f8fafc;
+            --surface-color: #ffffff;
+            --text-main: #1e293b;
+            --text-secondary: #64748b;
+            --border-color: #e2e8f0;
+            --error-color: #ef4444;
+            --success-color: #22c55e;
+            --warning-color: #f59e0b;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --radius-md: 0.5rem;
+            --radius-lg: 0.75rem;
+            --radius-xl: 1rem;
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Inter', 'Noto Sans JP', sans-serif;
+            background-color: var(--background-color);
+            color: var(--text-main);
+            line-height: 1.6;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        /* --- Header --- */
+        header {
+            background-color: var(--surface-color);
+            border-bottom: 1px solid var(--border-color);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: var(--shadow-sm);
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            font-weight: 700;
+            font-size: 1.25rem;
+            color: var(--primary-color);
+        }
+        .brand i {
+            font-size: 1.5rem;
+        }
+        .built-with {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            transition: color 0.2s;
+        }
+        .built-with:hover {
+            color: var(--primary-color);
+        }
+        /* --- Main Layout --- */
+        main {
+            flex: 1;
+            display: grid;
+            grid-template-columns: 1fr 350px;
+            gap: 2rem;
+            padding: 2rem;
+            max-width: 1400px;
+            margin: 0 auto;
+            width: 100%;
+        }
+        @media (max-width: 1024px) {
+            main {
+                grid-template-columns: 1fr;
+            }
+        }
+        /* --- Editor Section --- */
+        .editor-container {
+            background-color: var(--surface-color);
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-md);
+            padding: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            height: fit-content;
+        }
+        .section-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.5rem;
+        }
+        .section-title {
+            font-size: 1.125rem;
+            font-weight: 600;
+            color: var(--text-main);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .status-badge {
+            font-size: 0.75rem;
+            padding: 0.25rem 0.75rem;
+            border-radius: 9999px;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+        .status-badge.analyzed {
+            background-color: #dbeafe;
+            color: var(--primary-color);
+        }
+        .status-badge.processing {
+            background-color: #fef3c7;
+            color: var(--warning-color);
+        }
+        /* Input Area */
+        .input-wrapper {
+            position: relative;
+        }
+        textarea {
+            width: 100%;
+            min-height: 150px;
+            padding: 1rem;
+            font-size: 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius-lg);
+            font-family: inherit;
+            resize: vertical;
+            transition: border-color 0.2s, box-shadow 0.2s;
+            outline: none;
+        }
+        textarea:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+        }
+        .input-hint {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            margin-top: 0.5rem;
+            display: flex;
+            justify-content: space-between;
+        }
+        /* Action Buttons */
+        .actions {
+            display: flex;
+            gap: 1rem;
+            flex-wrap: wrap;
+        }
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.625rem 1.25rem;
+            font-size: 0.95rem;
+            font-weight: 500;
+            border-radius: var(--radius-md);
+            border: none;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .btn-primary {
+            background-color: var(--primary-color);
+            color: white;
+            box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
+        }
+        .btn-primary:hover {
+            background-color: var(--primary-hover);
+            transform: translateY(-1px);
+        }
+        .btn-primary:active {
+            transform: translateY(0);
+        }
+        .btn-secondary {
+            background-color: white;
+            color: var(--text-main);
+            border: 1px solid var(--border-color);
+        }
+        .btn-secondary:hover {
+            background-color: #f1f5f9;
+        }
+        /* --- Results Section --- */
+        .results-panel {
+            background-color: var(--surface-color);
+            border-radius: var(--radius-xl);
+            box-shadow: var(--shadow-md);
+            padding: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1.5rem;
+            height: fit-content;
+            position: sticky;
+            top: 5rem;
+        }
+        .result-header {
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 1rem;
+        }
+        .result-content {
+            background-color: #f8fafc;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 1rem;
+            min-height: 100px;
+            white-space: pre-wrap;
+            color: var(--text-main);
+            font-size: 1rem;
+            position: relative;
+        }
+        .result-content.highlight {
+            background-color: #ecfdf5;
+            border-color: #a7f3d0;
+        }
+        .suggestions-list {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            max-height: 400px;
+            overflow-y: auto;
+            padding-right: 0.5rem;
+        }
+        /* Scrollbar Styling */
+        .suggestions-list::-webkit-scrollbar {
+            width: 6px;
+        }
+        .suggestions-list::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 4px;
+        }
+        .suggestions-list::-webkit-scrollbar-thumb {
+            background: #cbd5e1;
+            border-radius: 4px;
+        }
+        .suggestions-list::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+        .suggestion-card {
+            background-color: white;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-md);
+            padding: 1rem;
+            transition: all 0.2s;
+            cursor: pointer;
+            position: relative;
+            overflow: hidden;
+        }
+        .suggestion-card:hover {
+            border-color: var(--primary-color);
+            box-shadow: var(--shadow-sm);
+        }
+        .suggestion-card.active {
+            border-color: var(--primary-color);
+            background-color: #eff6ff;
+        }
+        .suggestion-card::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            background-color: var(--primary-color);
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+        .suggestion-card.active::before {
+            opacity: 1;
+        }
+        .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            margin-bottom: 0.5rem;
+        }
+        .card-title {
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: var(--text-main);
+        }
+        .card-badge {
+            font-size: 0.7rem;
+            padding: 0.15rem 0.5rem;
+            border-radius: 4px;
+            background-color: #f1f5f9;
+            color: var(--text-secondary);
+            font-weight: 500;
+        }
+        .card-body {
+            font-size: 0.9rem;
+            color: var(--text-secondary);
+            margin-bottom: 0.75rem;
+        }
+        .card-footer {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            font-size: 0.85rem;
+        }
+        .action-icon {
+            color: var(--text-secondary);
+            padding: 0.25rem;
+            border-radius: 4px;
+            transition: color 0.2s;
+        }
+        .action-icon:hover {
+            color: var(--primary-color);
+            background-color: #eff6ff;
+        }
+        /* Toast Notification */
+        .toast-container {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            z-index: 1000;
+        }
+        .toast {
+            background-color: var(--surface-color);
+            border-left: 4px solid var(--primary-color);
+            padding: 1rem 1.5rem;
+            border-radius: var(--radius-md);
+            box-shadow: var(--shadow-lg);
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            animation: slideIn 0.3s ease-out forwards;
+            min-width: 300px;
+        }
+        .toast.success { border-left-color: var(--success-color); }
+        .toast.error { border-left-color: var(--error-color); }
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        @keyframes fadeOut {
+            to { opacity: 0; transform: translateY(10px); }
+        }
+        /* Loading Spinner */
+        .spinner {
+            width: 1.25rem;
+            height: 1.25rem;
+            border: 2px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top-color: white;
+            animation: spin 0.8s linear infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: var(--text-secondary);
+            font-size: 0.875rem;
+            border-top: 1px solid var(--border-color);
+            background-color: var(--surface-color);
+            margin-top: auto;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="brand">
+            <i class="fa-solid fa-file-medical"></i>
+            <span>MediTranscribe</span>
+        </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+            Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.75rem;"></i>
+        </a>
+    </header>
+    <main>
+        <!-- Left Column: Input -->
+        <section class="editor-container">
+            <div class="section-header">
+                <div class="section-title">
+                    <i class="fa-solid fa-pen-to-square" style="color: var(--primary-color);"></i>
+                    Original Text
+                </div>
+                <span class="status-badge processing" id="status-badge">Processing...</span>
+            </div>
+            <div class="input-wrapper">
+                <textarea id="input-text" placeholder="Paste the patient transcript here...">患者さんは同期がするらしいですが、信念図は以上なしです。</textarea>
+                <div class="input-hint">
+                    <span>Supports Japanese text input</span>
+                    <span id="char-count">0 characters</span>
+                </div>
+            </div>
+            <div class="actions">
+                <button class="btn btn-primary" id="analyze-btn">
+                    <i class="fa-solid fa-wand-magic-sparkles"></i>
+                    Analyze & Fix
+                </button>
+                <button class="btn btn-secondary" id="clear-btn">
+                    <i class="fa-solid fa-eraser"></i>
+                    Clear
+                </button>
+                <button class="btn btn-secondary" id="copy-btn">
+                    <i class="fa-regular fa-copy"></i>
+                    Copy Result
+                </button>
+            </div>
+        </section>
+        <!-- Right Column: Results -->
+        <section class="results-panel">
+            <div class="result-header">
+                <div class="section-title">
+                    <i class="fa-solid fa-check-circle" style="color: var(--success-color);"></i>
+                    Corrected Output
+                </div>
+            </div>
+            <div id="result-content" class="result-content">
+                Waiting for analysis...
+            </div>
+            <div class="section-header" style="margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
+                <div class="section-title">
+                    <i class="fa-solid fa-list-ul" style="color: var(--secondary-color);"></i>
+                    Suggestions
+                </div>
+            </div>
+            <div id="suggestions-list" class="suggestions-list">
+                <!-- Dynamic Content Here -->
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2023 MediTranscribe. Secure Medical Transcription Tool.</p>
+    </footer>
+    <!-- Toast Container -->
+    <div class="toast-container" id="toast-container"></div>
+    <script>
+        // --- Configuration & State ---
+        const config = {
+            delay: 800, // Simulated processing time
+        };
+        const state = {
+            isAnalyzing: false,
+            originalText: '',
+            correctedText: '',
+            suggestions: []
+        };
+        // --- DOM Elements ---
+        const elements = {
+            input: document.getElementById('input-text'),
+            output: document.getElementById('result-content'),
+            suggestionsList: document.getElementById('suggestions-list'),
+            analyzeBtn: document.getElementById('analyze-btn'),
+            clearBtn: document.getElementById('clear-btn'),
+            copyBtn: document.getElementById('copy-btn'),
+            charCount: document.getElementById('char-count'),
+            statusBadge: document.getElementById('status-badge'),
+            toastContainer: document.getElementById('toast-container')
+        };
+        // --- Initialization ---
+        document.addEventListener('DOMContentLoaded', () => {
+            updateCharCount();
+            // Focus input if empty
+            if (!elements.input.value) {
+                elements.input.focus();
+            }
+        });
+        // --- Event Listeners ---
+        elements.input.addEventListener('input', updateCharCount);
+        elements.analyzeBtn.addEventListener('click', handleAnalyze);
+        elements.clearBtn.addEventListener('click', () => {
+            elements.input.value = '';
+            updateCharCount();
+            elements.output.textContent = 'Waiting for analysis...';
+            elements.suggestionsList.innerHTML = '';
+            elements.statusBadge.className = 'status-badge';
+            elements.statusBadge.textContent = 'Ready';
+            elements.input.focus();
+            showToast('Input cleared', 'info');
+        });
+        elements.copyBtn.addEventListener('click', copyToClipboard);
+        // --- Core Logic ---
+        function updateCharCount() {
+            const count = elements.input.value.length;
+            elements.charCount.textContent = `${count} characters`;
+        }
+        function handleAnalyze() {
+            const text = elements.input.value.trim();
+            if (!text) {
+                showToast('Please enter some text to analyze.', 'error');
+                return;
+            }
+            if (state.isAnalyzing) return;
+            startAnalysis(text);
+        }
+        function startAnalysis(text) {
+            state.isAnalyzing = true;
+            // UI Updates
+            elements.analyzeBtn.disabled = true;
+            elements.analyzeBtn.innerHTML = '<div class="spinner"></div> Analyzing...';
+            elements.statusBadge.className = 'status-badge processing';
+            elements.statusBadge.textContent = 'Processing...';
+            // Simulate API delay
+            setTimeout(() => {
+                processText(text);
+                finishAnalysis();
+            }, config.delay);
+        }
+        function processText(text) {
+            // Mock Analysis Logic based on the user's specific request
+            // "患者さんは同期がするらしいですが、信念図は以上なしです。"
+            // This is likely a mishearing of "脈波" (myakuhaku - pulse) and "既往歴" (kikai-reki - medical history)
+            // "同期" (doki) -> "脈波" (myakuhaku)
+            // "信念図" (shinnen-zu) -> "既往歴" (kikai-reki)
+            // "以上なし" (ijou nashi) -> "既往歴なし" (kikai-reki nashi - No medical history)
+            const corrections = [
+                {
+                    type: 'Phonetic Error',
+                    severity: 'high',
+                    original: '同期',
+                    corrected: '脈波',
+                    reason: 'Likely misheard due to similar sounds.',
+                    context: '検査項目'
+                },
+                {
+                    type: 'Semantic Error',
+                    severity: 'high',
+                    original: '信念図',
+                    corrected: '既往歴',
+                    reason: 'Likely misheard due to similar sounds.',
+                    context: 'Medical History'
+                },
+                {
+                    type: 'Grammar/Flow',
+                    severity: 'medium',
+                    original: '以上なしです',
+                    corrected: '既往歴なしです',
+                    reason: 'Missing context word "既往歴".',
+                    context: 'Diagnosis Summary'
+                }
+            ];
+            // Construct corrected text
+            let processedText = text
+                .replace('同期', '脈波')
+                .replace('信念図', '既往歴')
+                .replace('以上なし', '既往歴なし');
+            state.originalText = text;
+            state.correctedText = processedText;
+            state.suggestions = corrections;
+            // Render Results
+            renderOutput();
+            renderSuggestions();
+        }
+        function finishAnalysis() {
+            state.isAnalyzing = false;
+            // Reset UI
+            elements.analyzeBtn.disabled = false;
+            elements.analyzeBtn.innerHTML = '<i class="fa-solid fa-wand-magic-sparkles"></i> Analyze & Fix';
+            elements.statusBadge.className = 'status-badge analyzed';
+            elements.statusBadge.textContent = 'Completed';
+            showToast('Analysis complete. Corrections applied.', 'success');
+        }
+        function renderOutput() {
+            elements.output.textContent = state.correctedText;
+            elements.output.classList.add('highlight');
+            // Remove highlight class after animation
+            setTimeout(() => {
+                elements.output.classList.remove('highlight');
+            }, 2000);
+        }
+        function renderSuggestions() {
+            elements.suggestionsList.innerHTML = '';
+            state.suggestions.forEach((suggestion, index) => {
+                const card = document.createElement('div');
+                card.className = 'suggestion-card';
+                card.onclick = () => applySuggestion(index);
+                // Severity Badge Color
+                let badgeColor = '#64748b'; // gray
+                if(suggestion.severity === 'high') badgeColor = '#ef4444'; // red
+                if(suggestion.severity === 'medium') badgeColor = '#f59e0b'; // orange
+                card.innerHTML = `
+                    <div class="card-header">
+                        <span class="card-title">${suggestion.type}</span>
+                        <span class="card-badge" style="background-color: ${badgeColor}20; color: ${badgeColor}">${suggestion.severity}</span>
+                    </div>
+                    <div class="card-body">
+                        <div style="display:flex; gap:0.5rem; margin-bottom:0.25rem;">
+                            <span style="text-decoration: line-through; color: #94a3b8;">${suggestion.original}</span>
+                            <i class="fa-solid fa-arrow-right" style="color: #cbd5e1; margin-top: 3px;"></i>
+                            <span style="color: var(--primary-color); font-weight: 600;">${suggestion.corrected}</span>
+                        </div>
+                        <p style="font-size: 0.85rem; margin-top: 0.5rem;">${suggestion.reason}</p>
+                    </div>
+                    <div class="card-footer">
+                        <span style="color: var(--text-secondary); font-size: 0.8rem;">Context: ${suggestion.context}</span>
+                        <i class="fa-solid fa-plus action-icon" title="Apply Fix"></i>
+                    </div>
+                `;
+                elements.suggestionsList.appendChild(card);
+            });
+        }
+        function applySuggestion(index) {
+            const s = state.suggestions[index];
+            // Update input
+            const currentInput = elements.input.value;
+            // Simple replace logic for demo (in production, you'd handle overlapping matches)
+            const newInput = currentInput.replace(s.original, s.corrected);
+            elements.input.value = newInput;
+            updateCharCount();
+            // Re-trigger analysis
+            handleAnalyze();
+            showToast(`Applied correction: ${s.original} -> ${s.corrected}`, 'success');
+        }
+        async function copyToClipboard() {
+            if (!state.correctedText) {
+                showToast('Nothing to copy yet.', 'error');
+                return;
+            }
+            try {
+                await navigator.clipboard.writeText(state.correctedText);
+                showToast('Text copied to clipboard!', 'success');
+            } catch (err) {
+                showToast('Failed to copy text.', 'error');
+            }
+        }
+        // --- Toast System ---
+        function showToast(message, type = 'info') {
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            let icon = 'fa-info-circle';
+            if (type === 'success') icon = 'fa-check-circle';
+            if (type === 'error') icon = 'fa-exclamation-circle';
+            toast.innerHTML = `
+                <i class="fa-solid ${icon}" style="color: inherit;"></i>
+                <span>${message}</span>
+            `;
+            elements.toastContainer.appendChild(toast);
+            // Remove after 3 seconds
+            setTimeout(() => {
+                toast.style.animation = 'fadeOut 0.3s ease-out forwards';
+                toast.addEventListener('animationend', () => {
+                    toast.remove();
+                });
+            }, 3000);
+        }
+    </script>
+</body>
+</html>