Hugging Face's logo

Spaces:
b08x
/
rad-multilingual-support-system
Running

App Files Community
rad-multilingual-support-system / index.html
b08x's picture
b08x
Add 3 files
9a6d95a verified
Raw
History Blame Contribute Delete
49.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Radiology IT Support - Document Translation</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
body {
 font-family: 'Roboto', sans-serif;
 background-color: #0f172a;
 color: #e2e8f0;
 }
.text-box {
 min-height: 400px;
 scrollbar-width: thin;
 scrollbar-color: #334155 #1e293b;
 }
.text-box::-webkit-scrollbar {
 width: 8px;
 }
.text-box::-webkit-scrollbar-track {
 background: #1e293b;
 }
.text-box::-webkit-scrollbar-thumb {
 background-color: #334155;
 border-radius: 4px;
 }
.highlight {
 background-color: rgba(74, 222, 128, 0.3);
 transition: background-color 0.3s;
 }
.tamil-font {
 font-family: 'Noto Sans Tamil', sans-serif;
 font-size: 1.05rem;
 line-height: 1.8;
 }
@keyframes pulse {
 0% { opacity: 0.6; }
 50% { opacity: 1; }
 100% { opacity: 0.6; }
 }
.loading {
 animation: pulse 1.5s infinite;
 }
.tab-content {
 display: none;
 }
.tab-content.active {
 display: block;
 }
.tab-button {
 transition: all 0.3s ease;
 }
.tab-button.active {
 background-color: #1e293b;
 border-bottom: 3px solid #10b981;
 }
#previewContainer {
 border: 2px dashed #334155;
 border-radius: 0.5rem;
 min-height: 300px;
 position: relative;
 }
#previewContainer.has-preview {
 border: none;
 }
#previewImage {
 max-width: 100%;
 max-height: 400px;
 display: none;
 }
#previewVideo {
 max-width: 100%;
 max-height: 400px;
 display: none;
 }
.drop-zone-overlay {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 background-color: rgba(15, 23, 42, 0.7);
 z-index: 10;
 border-radius: 0.5rem;
 }
.ocr-highlight {
 background-color: rgba(234, 179, 8, 0.3);
 border: 1px dashed rgba(234, 179, 8, 0.7);
 }
 </style>
</head>
<body class="min-h-screen">
 <div class="container mx-auto px-4 py-8">
 <!-- Header -->
 <header class="flex justify-between items-center mb-8">
 <div class="flex items-center space-x-3">
 <div class="bg-emerald-600 p-3 rounded-lg">
 <i class="fas fa-language text-white text-2xl"></i>
 </div>
 <div>
 <h1 class="text-2xl font-bold text-white">Radiology IT Support</h1>
 <p class="text-sm text-slate-400">Multilingual Support System</p>
 </div>
 </div>
 <div class="flex space-x-4">
 <button class="bg-slate-800 hover:bg-slate-700 text-slate-300 px-4 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-history"></i>
 <span>History</span>
 </button>
 <button class="bg-slate-800 hover:bg-slate-700 text-slate-300 px-4 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-cog"></i>
 <span>Settings</span>
 </button>
 </div>
 </header>
<!-- Tabs Navigation -->
 <div class="flex border-b border-slate-700 mb-6">
 <button class="tab-button active px-6 py-3 font-medium text-white" data-tab="text-translation">
 <i class="fas fa-align-left mr-2"></i>Text Translation
 </button>
 <button class="tab-button px-6 py-3 font-medium text-slate-400 hover:text-white" data-tab="media-analysis">
 <i class="fas fa-image mr-2"></i>Screenshot/Screencast Analysis
 </button>
 </div>
<!-- Text Translation Tab -->
 <div id="text-translation" class="tab-content active">
 <!-- Translation Controls -->
 <div class="bg-slate-800 rounded-xl p-6 mb-6 shadow-lg">
 <div class="flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0">
 <div class="flex items-center space-x-4">
 <div>
 <label class="block text-sm font-medium text-slate-400 mb-1">Source Language</label>
 <div class="relative">
 <select class="bg-slate-900 border border-slate-700 text-slate-300 rounded-lg px-4 py-2 pr-8 appearance-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
 <option selected>English</option>
 <option>Spanish</option>
 <option>French</option>
 <option>German</option>
 </select>
 <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500">
 <i class="fas fa-chevron-down"></i>
 </div>
 </div>
 </div>
 <div class="text-slate-500">
 <i class="fas fa-exchange-alt"></i>
 </div>
 <div>
 <label class="block text-sm font-medium text-slate-400 mb-1">Target Language</label>
 <div class="relative">
 <select class="bg-slate-900 border border-slate-700 text-slate-300 rounded-lg px-4 py-2 pr-8 appearance-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
 <option>Tamil</option>
 <option>Hindi</option>
 <option>Telugu</option>
 <option>Malayalam</option>
 </select>
 <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500">
 <i class="fas fa-chevron-down"></i>
 </div>
 </div>
 </div>
 </div>
<div class="flex space-x-3">
 <button id="translateBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-exchange-alt"></i>
 <span>Translate</span>
 </button>
 <button class="border border-slate-600 hover:bg-slate-700 text-slate-300 px-4 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-upload"></i>
 <span>Upload Document</span>
 </button>
 </div>
 </div>
 </div>
<!-- Translation Area -->
 <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
 <!-- Original Text -->
 <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold text-white">Original Text (English)</h2>
 <div class="flex space-x-2">
 <button class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-microphone"></i>
 </button>
 <button class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-expand"></i>
 </button>
 </div>
 </div>
 <div class="bg-slate-900 rounded-lg p-4 border border-slate-700">
 <textarea id="originalText" class="w-full bg-transparent text-slate-300 outline-none resize-none text-box" placeholder="Enter text to translate or upload a document..." rows="15">Radiology Information System (RIS) is a computerized system used to manage medical imagery and associated data. RIS complements PACS (Picture Archiving and Communication System) and provides critical functionality for radiology departments, including:
- Patient scheduling and tracking
- Imaging procedure documentation
- Results reporting and distribution
- Billing and financial reporting
For IT support, common issues include:
1. System integration problems between RIS and PACS
2. Network connectivity issues affecting image transfer
3. User authentication failures
4. Slow system performance during peak hours
5. Data backup and recovery challenges</textarea>
 </div>
 <div class="flex justify-between items-center mt-3 text-sm text-slate-500">
 <div>
 <i class="fas fa-keyboard mr-1"></i>
 <span>0 words</span>
 </div>
 <div>
 <button class="text-slate-400 hover:text-white transition">
 <i class="fas fa-trash-alt mr-1"></i>
 <span>Clear</span>
 </button>
 </div>
 </div>
 </div>
<!-- Translated Text -->
 <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
 <div class="flex justify-between items-center mb-4">
 <h2 class="text-lg font-semibold text-white">Translated Text (Tamil)</h2>
 <div class="flex space-x-2">
 <button class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-volume-up"></i>
 </button>
 <button class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-copy"></i>
 </button>
 <button class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-expand"></i>
 </button>
 </div>
 </div>
 <div class="bg-slate-900 rounded-lg p-4 border border-slate-700">
 <div id="translatedText" class="w-full text-slate-300 tamil-font text-box" rows="15">
 <div id="loadingIndicator" class="loading text-center py-20 text-slate-500">
 <i class="fas fa-language text-4xl mb-3"></i>
 <p>Translation will appear here</p>
 </div>
 <div id="actualTranslation" class="hidden">
 <p>ரேடியாலஜி தகவல் அமைப்பு (RIS) என்பது மருத்துவ படங்கள் மற்றும் தொடர்புடைய தரவுகளை நிர்வகிக்கப் பயன்படும் கணினி மயமாக்கப்பட்ட அமைப்பாகும். RIS, PACS (படம் காப்பகம் மற்றும் தகவல் தொடர்பு அமைப்பு) உடன் இணைந்து செயல்படுகிறது மற்றும் ரேடியாலஜி துறைகளுக்கு முக்கியமான செயல்பாடுகளை வழங்குகிறது, அவை:</p>
 <ul class="list-disc pl-5 space-y-2 mt-2">
 <li>நோயாளி அட்டவணை மற்றும் கண்காணிப்பு</li>
 <li>படிமம் எடுக்கும் நடைமுறை ஆவணப்படுத்தல்</li>
 <li>முடிவுகள் அறிக்கை மற்றும் விநியோகம்</li>
 <li>பில் செய்தல் மற்றும் நிதி அறிக்கை</li>
 </ul>
 <p class="mt-4">ஐடி ஆதரவுக்கு, பொதுவான பிரச்சினைகள்:</p>
 <ol class="list-decimal pl-5 space-y-2 mt-2">
 <li>RIS மற்றும் PACS இடையே அமைப்பு ஒருங்கிணைப்பு பிரச்சினைகள்</li>
 <li>பட பரிமாற்றத்தை பாதிக்கும் நெட்வொர்க் இணைப்பு பிரச்சினைகள்</li>
 <li>பயனர் அங்கீகார தோல்விகள்</li>
 <li>உச்ச நேரங்களில் மெதுவான அமைப்பு செயல்திறன்</li>
 <li>தரவு காப்பு மற்றும் மீட்பு சவால்கள்</li>
 </ol>
 </div>
 </div>
 </div>
 <div class="flex justify-between items-center mt-3 text-sm text-slate-500">
 <div>
 <i class="fas fa-keyboard mr-1"></i>
 <span>0 words</span>
 </div>
 <div>
 <button class="text-emerald-400 hover:text-emerald-300 transition">
 <i class="fas fa-download mr-1"></i>
 <span>Download</span>
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Additional Features -->
 <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
 <!-- Glossary -->
 <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
 <div class="flex items-center space-x-3 mb-4">
 <div class="bg-blue-600 p-2 rounded-lg">
 <i class="fas fa-book text-white"></i>
 </div>
 <h3 class="text-lg font-semibold text-white">Radiology Glossary</h3>
 </div>
 <div class="space-y-3">
 <div class="bg-slate-700 p-3 rounded-lg">
 <div class="flex justify-between items-start">
 <div>
 <p class="font-medium text-white">RIS</p>
 <p class="text-sm text-slate-400">Radiology Information System</p>
 </div>
 <button class="text-blue-400 hover:text-blue-300 text-sm">
 <i class="fas fa-plus mr-1"></i> Add
 </button>
 </div>
 </div>
 <div class="bg-slate-700 p-3 rounded-lg">
 <div class="flex justify-between items-start">
 <div>
 <p class="font-medium text-white">PACS</p>
 <p class="text-sm text-slate-400">Picture Archiving and Communication System</p>
 </div>
 <button class="text-blue-400 hover:text-blue-300 text-sm">
 <i class="fas fa-plus mr-1"></i> Add
 </button>
 </div>
 </div>
 <div class="bg-slate-700 p-3 rounded-lg">
 <div class="flex justify-between items-start">
 <div>
 <p class="font-medium text-white">DICOM</p>
 <p class="text-sm text-slate-400">Digital Imaging and Communications in Medicine</p>
 </div>
 <button class="text-blue-400 hover:text-blue-300 text-sm">
 <i class="fas fa-plus mr-1"></i> Add
 </button>
 </div>
 </div>
 </div>
 </div>
<!-- Recent Translations -->
 <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
 <div class="flex items-center space-x-3 mb-4">
 <div class="bg-purple-600 p-2 rounded-lg">
 <i class="fas fa-clock text-white"></i>
 </div>
 <h3 class="text-lg font-semibold text-white">Recent Translations</h3>
 </div>
 <div class="space-y-3">
 <div class="bg-slate-700 p-3 rounded-lg hover:bg-slate-600 transition cursor-pointer">
 <p class="font-medium text-white truncate">RIS-PACS integration guide</p>
 <div class="flex justify-between items-center mt-1">
 <span class="text-xs text-slate-400">English → Tamil</span>
 <span class="text-xs text-slate-500">2 hours ago</span>
 </div>
 </div>
 <div class="bg-slate-700 p-3 rounded-lg hover:bg-slate-600 transition cursor-pointer">
 <p class="font-medium text-white truncate">Troubleshooting network issues</p>
 <div class="flex justify-between items-center mt-1">
 <span class="text-xs text-slate-400">English → Tamil</span>
 <span class="text-xs text-slate-500">1 day ago</span>
 </div>
 </div>
 <div class="bg-slate-700 p-3 rounded-lg hover:bg-slate-600 transition cursor-pointer">
 <p class="font-medium text-white truncate">User manual for radiologists</p>
 <div class="flex justify-between items-center mt-1">
 <span class="text-xs text-slate-400">English → Tamil</span>
 <span class="text-xs text-slate-500">3 days ago</span>
 </div>
 </div>
 </div>
 </div>
<!-- Translation Memory -->
 <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
 <div class="flex items-center space-x-3 mb-4">
 <div class="bg-amber-600 p-2 rounded-lg">
 <i class="fas fa-database text-white"></i>
 </div>
 <h3 class="text-lg font-semibold text-white">Translation Memory</h3>
 </div>
 <div class="bg-slate-900 rounded-lg p-4 border border-slate-700">
 <div class="flex items-center justify-between mb-3">
 <span class="text-sm font-medium text-slate-300">Matched Segments</span>
 <span class="text-xs bg-emerald-900 text-emerald-300 px-2 py-1 rounded">85% match</span>
 </div>
 <div class="text-sm space-y-3">
 <div class="p-2 bg-slate-800 rounded hover:bg-slate-700 transition cursor-pointer">
 <p class="text-slate-300">"System integration problems between RIS and PACS"</p>
 <p class="text-slate-500 tamil-font mt-1">"RIS மற்றும் PACS இடையே அமைப்பு ஒருங்கிணைப்பு பிரச்சினைகள்"</p>
 </div>
 <div class="p-2 bg-slate-800 rounded hover:bg-slate-700 transition cursor-pointer">
 <p class="text-slate-300">"User authentication failures"</p>
 <p class="text-slate-500 tamil-font mt-1">"பயனர் அங்கீகார தோல்விகள்"</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Screenshot/Screencast Analysis Tab -->
 <div id="media-analysis" class="tab-content">
 <div class="bg-slate-800 rounded-xl p-6 mb-6 shadow-lg">
 <h2 class="text-xl font-semibold text-white mb-4">Analyze Radiology IT Support Media</h2>
 <p class="text-slate-400 mb-6">Upload screenshots or screencasts of Radiology IT systems to extract and translate text, identify UI elements, and get contextual help.</p>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
 <!-- Upload and Preview Section -->
 <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-semibold text-white">Upload Media</h3>
 <div class="flex space-x-2">
 <button id="captureBtn" class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-camera"></i>
 </button>
 <button id="clearMediaBtn" class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-trash-alt"></i>
 </button>
 </div>
 </div>
<div id="previewContainer" class="mb-4">
 <div id="dropZoneOverlay" class="drop-zone-overlay">
 <i class="fas fa-cloud-upload-alt text-4xl text-slate-500 mb-3"></i>
 <p class="text-slate-400 mb-2">Drag & drop screenshot or screencast here</p>
 <p class="text-sm text-slate-500">or</p>
 <label for="mediaUpload" class="mt-3 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg cursor-pointer transition">
 <i class="fas fa-upload mr-2"></i>Select File
 <input id="mediaUpload" type="file" accept="image/*,video/*" class="hidden">
 </label>
 </div>
 <img id="previewImage" alt="Preview of uploaded image">
 <video id="previewVideo" controls></video>
 </div>
<div class="flex flex-wrap gap-3 mb-4">
 <button id="extractTextBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-font"></i>
 <span>Extract Text (OCR)</span>
 </button>
 <button id="analyzeUiBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-object-group"></i>
 <span>Analyze UI Elements</span>
 </button>
 <button id="translateMediaBtn" class="bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition">
 <i class="fas fa-language"></i>
 <span>Translate Extracted Text</span>
 </button>
 </div>
<div class="bg-slate-900 rounded-lg p-4 border border-slate-700">
 <label class="block text-sm font-medium text-slate-400 mb-2">Target Language for Translation</label>
 <div class="relative">
 <select class="bg-slate-800 border border-slate-700 text-slate-300 rounded-lg px-4 py-2 pr-8 w-full appearance-none focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
 <option selected>Tamil</option>
 <option>Hindi</option>
 <option>Telugu</option>
 <option>Malayalam</option>
 </select>
 <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-slate-500">
 <i class="fas fa-chevron-down"></i>
 </div>
 </div>
 </div>
 </div>
<!-- Analysis Results Section -->
 <div class="bg-slate-800 rounded-xl p-6 shadow-lg">
 <div class="flex justify-between items-center mb-4">
 <h3 class="text-lg font-semibold text-white">Analysis Results</h3>
 <div class="flex space-x-2">
 <button id="copyResultsBtn" class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-copy"></i>
 </button>
 <button id="downloadResultsBtn" class="text-slate-400 hover:text-white p-2 rounded-full hover:bg-slate-700 transition">
 <i class="fas fa-download"></i>
 </button>
 </div>
 </div>
<div class="bg-slate-900 rounded-lg p-4 border border-slate-700 h-full">
 <div id="analysisResults" class="text-slate-300 text-box">
 <div id="mediaLoadingIndicator" class="loading text-center py-20 text-slate-500 hidden">
 <i class="fas fa-spinner fa-spin text-4xl mb-3"></i>
 <p>Analyzing media content...</p>
 </div>
 <div id="mediaResultsPlaceholder" class="text-center py-20 text-slate-500">
 <i class="fas fa-search text-4xl mb-3"></i>
 <p>Extracted text and analysis will appear here</p>
 </div>
 <div id="actualMediaResults" class="hidden space-y-4">
 <div class="bg-slate-800 p-3 rounded-lg">
 <h4 class="font-medium text-white mb-2">Extracted Text:</h4>
 <div id="extractedTextContent" class="text-slate-300">
 <p class="ocr-highlight">RIS Configuration Wizard</p>
 <p class="ocr-highlight">Step 3: PACS Integration Settings</p>
 <p>Server Address: <span class="ocr-highlight">pacs.radiologyhospital.org</span></p>
 <p>Port: <span class="ocr-highlight">104</span></p>
 <p class="ocr-highlight">Authentication: DICOM Level 2</p>
 <p class="ocr-highlight">Test Connection</p>
 </div>
 </div>
 <div class="bg-slate-800 p-3 rounded-lg">
 <h4 class="font-medium text-white mb-2">UI Elements Identified:</h4>
 <div class="text-slate-300 space-y-2">
 <div class="flex items-start">
 <span class="bg-blue-600 text-white text-xs px-2 py-1 rounded mr-2">Button</span>
 <p>"Test Connection" - Likely verifies PACS server connectivity</p>
 </div>
 <div class="flex items-start">
 <span class="bg-purple-600 text-white text-xs px-2 py-1 rounded mr-2">Input Field</span>
 <p>"Server Address" - Should contain PACS server hostname or IP</p>
 </div>
 <div class="flex items-start">
 <span class="bg-green-600 text-white text-xs px-2 py-1 rounded mr-2">Numeric Input</span>
 <p>"Port" - Typically 104 for DICOM communication</p>
 </div>
 </div>
 </div>
 <div class="bg-slate-800 p-3 rounded-lg">
 <h4 class="font-medium text-white mb-2">Translated Text (Tamil):</h4>
 <div class="text-slate-300 tamil-font">
 <p>RIS கட்டமைப்பு வழிகாட்டி</p>
 <p>படி 3: PACS ஒருங்கிணைப்பு அமைப்புகள்</p>
 <p>சேவையக முகவரி: pacs.radiologyhospital.org</p>
 <p>துறை: 104</p>
 <p>அங்கீகாரம்: DICOM நிலை 2</p>
 <p>இணைப்பை சோதிக்கவும்</p>
 </div>
 </div>
 <div class="bg-slate-800 p-3 rounded-lg">
 <h4 class="font-medium text-white mb-2">Support Suggestions:</h4>
 <div class="text-slate-300 space-y-2 text-sm">
 <div class="flex items-start">
 <i class="fas fa-info-circle text-blue-400 mt-1 mr-2"></i>
 <p>If connection fails, verify network firewall allows traffic on port 104 between RIS and PACS servers</p>
 </div>
 <div class="flex items-start">
 <i class="fas fa-info-circle text-blue-400 mt-1 mr-2"></i>
 <p>DICOM Level 2 authentication requires valid AE Titles configured on both systems</p>
 </div>
 <div class="flex items-start">
 <i class="fas fa-info-circle text-blue-400 mt-1 mr-2"></i>
 <p>Common issue: Check if PACS server certificate is trusted if using secure connection</p>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Sample Radiology UI Screens -->
 <div class="bg-slate-800 rounded-xl p-6 shadow-lg mt-6">
 <h3 class="text-lg font-semibold text-white mb-4">Common Radiology IT Screens</h3>
 <p class="text-slate-400 mb-4">Quick access to sample screens for analysis practice:</p>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
 <div class="cursor-pointer" onclick="loadSampleImage('ris_login')">
 <div class="bg-slate-700 rounded-lg overflow-hidden">
 <img src="https://via.placeholder.com/300x200/1e293b/64748b?text=RIS+Login" alt="RIS Login Screen" class="w-full h-32 object-cover">
 </div>
 <p class="text-sm text-slate-300 mt-2 text-center">RIS Login</p>
 </div>
 <div class="cursor-pointer" onclick="loadSampleImage('pacs_config')">
 <div class="bg-slate-700 rounded-lg overflow-hidden">
 <img src="https://via.placeholder.com/300x200/1e293b/64748b?text=PACS+Config" alt="PACS Configuration" class="w-full h-32 object-cover">
 </div>
 <p class="text-sm text-slate-300 mt-2 text-center">PACS Config</p>
 </div>
 <div class="cursor-pointer" onclick="loadSampleImage('worklist_error')">
 <div class="bg-slate-700 rounded-lg overflow-hidden">
 <img src="https://via.placeholder.com/300x200/1e293b/64748b?text=Worklist+Error" alt="Worklist Error" class="w-full h-32 object-cover">
 </div>
 <p class="text-sm text-slate-300 mt-2 text-center">Worklist Error</p>
 </div>
 <div class="cursor-pointer" onclick="loadSampleImage('dicom_viewer')">
 <div class="bg-slate-700 rounded-lg overflow-hidden">
 <img src="https://via.placeholder.com/300x200/1e293b/64748b?text=DICOM+Viewer" alt="DICOM Viewer" class="w-full h-32 object-cover">
 </div>
 <p class="text-sm text-slate-300 mt-2 text-center">DICOM Viewer</p>
 </div>
 </div>
 </div>
 </div>
 </div>
<script>
 // Tab switching functionality
 document.querySelectorAll('.tab-button').forEach(button => {
 button.addEventListener('click', function() {
 // Remove active class from all buttons and content
 document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
 document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
// Add active class to clicked button and corresponding content
 this.classList.add('active');
 const tabId = this.getAttribute('data-tab');
 document.getElementById(tabId).classList.add('active');
 });
 });
 // Simulate translation process for text tab
 document.getElementById('translateBtn').addEventListener('click', function() {
 const loadingIndicator = document.getElementById('loadingIndicator');
 const actualTranslation = document.getElementById('actualTranslation');
loadingIndicator.classList.add('loading');
 loadingIndicator.innerHTML = '<i class="fas fa-spinner fa-spin text-4xl mb-3"></i><p>Translating Radiology IT content...</p>';
// Simulate API call delay
 setTimeout(function() {
 loadingIndicator.classList.add('hidden');
 actualTranslation.classList.remove('hidden');
// Highlight corresponding paragraphs when hovered
 const originalText = document.getElementById('originalText');
 const translatedParagraphs = actualTranslation.querySelectorAll('p, li');
originalText.addEventListener('mouseup', function() {
 const selectedText = window.getSelection().toString().trim();
 if (selectedText) {
 // Clear previous highlights
 translatedParagraphs.forEach(p => {
 p.classList.remove('highlight');
 });
// Simple matching logic (in a real app, this would be more sophisticated)
 translatedParagraphs.forEach(p => {
 if (p.textContent.includes(selectedText.substring(0, 10))) {
 p.classList.add('highlight');
 }
 });
 }
 });
 }, 2000);
 });
// Word count functionality
 const originalText = document.getElementById('originalText');
 originalText.addEventListener('input', function() {
 const words = this.value.trim() ? this.value.trim().split(/\s+/).length : 0;
 this.nextElementSibling.querySelector('span').textContent = words + ' words';
 });
 // Media Analysis Tab Functionality
 const mediaUpload = document.getElementById('mediaUpload');
 const previewContainer = document.getElementById('previewContainer');
 const previewImage = document.getElementById('previewImage');
 const previewVideo = document.getElementById('previewVideo');
 const dropZoneOverlay = document.getElementById('dropZoneOverlay');
 const mediaLoadingIndicator = document.getElementById('mediaLoadingIndicator');
 const mediaResultsPlaceholder = document.getElementById('mediaResultsPlaceholder');
 const actualMediaResults = document.getElementById('actualMediaResults');
 // Handle file selection
 mediaUpload.addEventListener('change', function(e) {
 handleFileSelection(e.target.files[0]);
 });
 // Handle drag and drop
 previewContainer.addEventListener('dragover', function(e) {
 e.preventDefault();
 this.classList.add('border-emerald-500');
 });
 previewContainer.addEventListener('dragleave', function() {
 this.classList.remove('border-emerald-500');
 });
 previewContainer.addEventListener('drop', function(e) {
 e.preventDefault();
 this.classList.remove('border-emerald-500');
 if (e.dataTransfer.files.length) {
 handleFileSelection(e.dataTransfer.files[0]);
 }
 });
 // Handle file selection and preview
 function handleFileSelection(file) {
 if (!file.type.match('image.*') && !file.type.match('video.*')) {
 alert('Please select an image or video file');
 return;
 }
 const reader = new FileReader();
 reader.onload = function(e) {
 if (file.type.match('image.*')) {
 previewImage.src = e.target.result;
 previewImage.style.display = 'block';
 previewVideo.style.display = 'none';
 } else if (file.type.match('video.*')) {
 previewVideo.src = e.target.result;
 previewVideo.style.display = 'block';
 previewImage.style.display = 'none';
 }
 previewContainer.classList.add('has-preview');
 dropZoneOverlay.style.display = 'none';
 };
 if (file) {
 reader.readAsDataURL(file);
 }
 }
 // Clear media
 document.getElementById('clearMediaBtn').addEventListener('click', function() {
 previewImage.src = '';
 previewVideo.src = '';
 previewImage.style.display = 'none';
 previewVideo.style.display = 'none';
 previewContainer.classList.remove('has-preview');
 dropZoneOverlay.style.display = 'flex';
 actualMediaResults.classList.add('hidden');
 mediaResultsPlaceholder.classList.remove('hidden');
 });
 // Simulate analysis buttons
 document.getElementById('extractTextBtn').addEventListener('click', function() {
 if (!previewContainer.classList.contains('has-preview')) {
 alert('Please upload an image or video first');
 return;
 }
 mediaLoadingIndicator.classList.remove('hidden');
 mediaResultsPlaceholder.classList.add('hidden');
 actualMediaResults.classList.add('hidden');
 setTimeout(function() {
 mediaLoadingIndicator.classList.add('hidden');
 actualMediaResults.classList.remove('hidden');
 }, 1500);
 });
 document.getElementById('analyzeUiBtn').addEventListener('click', function() {
 if (!previewContainer.classList.contains('has-preview')) {
 alert('Please upload an image or video first');
 return;
 }
 mediaLoadingIndicator.classList.remove('hidden');
 mediaResultsPlaceholder.classList.add('hidden');
 actualMediaResults.classList.add('hidden');
 setTimeout(function() {
 mediaLoadingIndicator.classList.add('hidden');
 actualMediaResults.classList.remove('hidden');
 }, 1500);
 });
 document.getElementById('translateMediaBtn').addEventListener('click', function() {
 if (!previewContainer.classList.contains('has-preview')) {
 alert('Please upload an image or video first');
 return;
 }
 mediaLoadingIndicator.classList.remove('hidden');
 mediaResultsPlaceholder.classList.add('hidden');
 actualMediaResults.classList.add('hidden');
 setTimeout(function() {
 mediaLoadingIndicator.classList.add('hidden');
 actualMediaResults.classList.remove('hidden');
 }, 1500);
 });
 // Load sample images
 function loadSampleImage(type) {
 let sampleImageUrl = '';
 let altText = '';
switch(type) {
 case 'ris_login':
 sampleImageUrl = 'https://via.placeholder.com/800x600/1e293b/64748b?text=RIS+Login+Screen%0A%0AUsername%3A+__________%0APassword%3A+__________%0A%0ALogin+Button';
 altText = 'Sample RIS Login Screen';
 break;
 case 'pacs_config':
 sampleImageUrl = 'https://via.placeholder.com/800x600/1e293b/64748b?text=PACS+Configuration%0A%0AServer+Address%3A+pacs.radiologyhospital.org%0APort%3A+104%0AAE+Title%3A+RIS_SERVER%0A%0ATest+Connection+Button';
 altText = 'Sample PACS Configuration Screen';
 break;
 case 'worklist_error':
 sampleImageUrl = 'https://via.placeholder.com/800x600/1e293b/64748b?text=Worklist+Error%0A%0AError%3A+Unable+to+retrieve+worklist%0A%0APACS+server+unreachable%0ACheck+network+connection%0A%0ARetry+Button';
 altText = 'Sample Worklist Error Screen';
 break;
 case 'dicom_viewer':
 sampleImageUrl = 'https://via.placeholder.com/800x600/1e293b/64748b?text=DICOM+Viewer%0A%0APatient%3A+John+Doe%0AStudy%3A+CT+Abdomen%0ASeries%3A+Axial+Images%0A%0AWindow+Level%3A+350%0AWindow+Width%3A+1500%0A%0AZoom%2C+Pan%2C+Rotate+Tools';
 altText = 'Sample DICOM Viewer Screen';
 break;
 }
previewImage.src = sampleImageUrl;
 previewImage.alt = altText;
 previewImage.style.display = 'block';
 previewVideo.style.display = 'none';
 previewContainer.classList.add('has-preview');
 dropZoneOverlay.style.display = 'none';
// Clear any previous results
 actualMediaResults.classList.add('hidden');
 mediaResultsPlaceholder.classList.remove('hidden');
 }
 // Copy results
 document.getElementById('copyResultsBtn').addEventListener('click', function() {
 if (actualMediaResults.classList.contains('hidden')) {
 alert('No results to copy');
 return;
 }
const range = document.createRange();
 range.selectNode(actualMediaResults);
 window.getSelection().removeAllRanges();
 window.getSelection().addRange(range);
 document.execCommand('copy');
 window.getSelection().removeAllRanges();
// Show copied feedback
 const originalText = this.innerHTML;
 this.innerHTML = '<i class="fas fa-check"></i> Copied!';
 setTimeout(() => {
 this.innerHTML = originalText;
 }, 2000);
 });
 // Download results
 document.getElementById('downloadResultsBtn').addEventListener('click', function() {
 if (actualMediaResults.classList.contains('hidden')) {
 alert('No results to download');
 return;
 }
const content = actualMediaResults.innerText;
 const blob = new Blob([content], { type: 'text/plain' });
 const url = URL.createObjectURL(blob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'radiology-it-analysis-results.txt';
 document.body.appendChild(a);
 a.click();
 document.body.removeChild(a);
 URL.revokeObjectURL(url);
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=b08x/rad-multilingual-support-system" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>