151 lines
6.2 KiB
TypeScript
151 lines
6.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { Download, Code2 } from 'lucide-react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import remarkMath from 'remark-math';
|
|
import remarkBreaks from 'remark-breaks';
|
|
import rehypeKatex from 'rehype-katex';
|
|
import 'katex/dist/katex.min.css';
|
|
import { RecognitionResult } from '../types';
|
|
import ExportSidebar from './ExportSidebar';
|
|
import { useLanguage } from '../contexts/LanguageContext';
|
|
|
|
interface ResultPanelProps {
|
|
result: RecognitionResult | null;
|
|
fileStatus?: 'pending' | 'processing' | 'completed' | 'failed';
|
|
}
|
|
|
|
/**
|
|
* Preprocess LaTeX content to fix common formatting issues
|
|
* that may cause KaTeX rendering to fail
|
|
*/
|
|
function preprocessLatex(content: string): string {
|
|
if (!content) return '';
|
|
|
|
let processed = content;
|
|
|
|
// Convert literal \n (escaped newlines from OCR) to actual newlines
|
|
// This handles cases where the API returns "\\n" as a string instead of actual newline characters
|
|
|
|
// Fix mixed display math delimiters: $$\[...\]$$ -> $$...$$
|
|
// This handles cases where \[ \] are incorrectly nested inside $$ $$
|
|
// Note: In JS replace(), $$ means "insert one $", so we need $$$$ to insert $$
|
|
processed = processed.replace(/\$\$\s*\\\[/g, '$$$$');
|
|
processed = processed.replace(/\\\]\s*\$\$/g, '$$$$');
|
|
|
|
// Also fix standalone \[ and \] that should be $$ for remark-math compatibility
|
|
// Replace \[ with $$ at the start of display math (not inside other math)
|
|
processed = processed.replace(/(?<!\$)\\\[(?!\$)/g, '$$$$');
|
|
processed = processed.replace(/(?<!\$)\\\](?!\$)/g, '$$$$');
|
|
|
|
// IMPORTANT: remark-math requires $$ to be on its own line for block math
|
|
// Ensure $$ followed by \begin has a newline: $$\begin -> $$\n\begin
|
|
processed = processed.replace(/\$\$([^\n$])/g, '$$$$\n$1');
|
|
// Ensure content followed by $$ has a newline: content$$ -> content\n$$
|
|
processed = processed.replace(/([^\n$])\$\$/g, '$1\n$$$$');
|
|
|
|
// // Fix: \left \{ -> \left\{ (remove space between \left and delimiter)
|
|
processed = processed.replace(/\\left\s+\\/g, '\\left\\');
|
|
processed = processed.replace(/\\left\s+\{/g, '\\left\\{');
|
|
processed = processed.replace(/\\left\s+\[/g, '\\left[');
|
|
processed = processed.replace(/\\left\s+\(/g, '\\left(');
|
|
|
|
// // Fix: \right \} -> \right\} (remove space between \right and delimiter)
|
|
processed = processed.replace(/\\right\s+\\/g, '\\right\\');
|
|
processed = processed.replace(/\\right\s+\}/g, '\\right\\}');
|
|
processed = processed.replace(/\\right\s+\]/g, '\\right]');
|
|
processed = processed.replace(/\\right\s+\)/g, '\\right)');
|
|
|
|
|
|
// Fix: \begin{matrix} with mismatched \left/\right -> use \begin{array}
|
|
// This is a more complex issue that requires proper \left/\right pairing
|
|
// For now, we'll try to convert problematic patterns
|
|
|
|
// Replace \left( ... \right. text \right) pattern with ( ... \right. text )
|
|
// This fixes the common mispairing issue
|
|
processed = processed.replace(/\\left\(([^)]*?)\\right\.\s*(\\text\{[^}]*\})\s*\\right\)/g, '($1\\right. $2)');
|
|
|
|
return processed;
|
|
}
|
|
|
|
export default function ResultPanel({ result, fileStatus }: ResultPanelProps) {
|
|
const { t } = useLanguage();
|
|
const [isExportSidebarOpen, setIsExportSidebarOpen] = useState(false);
|
|
|
|
if (!result) {
|
|
if (fileStatus === 'processing' || fileStatus === 'pending') {
|
|
return (
|
|
<div className="h-full flex flex-col items-center justify-center bg-white text-center p-8">
|
|
<div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mb-6"></div>
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
|
{fileStatus === 'pending' ? t.resultPanel.waitingQueue : t.resultPanel.analyzing}
|
|
</h3>
|
|
<p className="text-gray-500 max-w-sm">
|
|
{fileStatus === 'pending'
|
|
? t.resultPanel.queueSubtitle
|
|
: t.resultPanel.processingSubtitle}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full flex flex-col items-center justify-center bg-white text-center p-8" id="result-empty-state">
|
|
<div className="w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mb-6 shadow-inner">
|
|
<Code2 size={48} className="text-gray-900" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">{t.resultPanel.waitingTitle}</h3>
|
|
<p className="text-gray-500 max-w-sm">
|
|
{t.resultPanel.waitingSubtitle}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-white relative overflow-hidden" id="result-panel-content">
|
|
{/* Top Header */}
|
|
<div className="h-16 px-6 border-b border-gray-200 flex items-center justify-between bg-white shrink-0 z-10">
|
|
<div className="flex items-center gap-4">
|
|
<h2 className="text-lg font-bold text-gray-900">{t.resultPanel.markdown}</h2>
|
|
</div>
|
|
|
|
<button
|
|
id="export-button"
|
|
onClick={() => setIsExportSidebarOpen(true)}
|
|
className={`px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors flex items-center gap-2 shadow-sm ${isExportSidebarOpen ? 'opacity-0 pointer-events-none' : ''}`}
|
|
>
|
|
<Download size={16} />
|
|
{t.common.export}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content Area - Rendered Markdown */}
|
|
{
|
|
<div className="flex-1 overflow-auto p-8 custom-scrollbar flex justify-center">
|
|
<div
|
|
id="markdown-preview-content"
|
|
className="prose prose-blue max-w-3xl w-full prose-headings:font-bold prose-h1:text-2xl prose-h2:text-xl prose-p:leading-relaxed prose-pre:bg-gray-50 prose-pre:border prose-pre:border-gray-100 [&_.katex-display]:text-center bg-white p-4"
|
|
>
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkMath, remarkBreaks]}
|
|
rehypePlugins={[[rehypeKatex, {
|
|
throwOnError: false,
|
|
errorColor: '#cc0000',
|
|
strict: false
|
|
}]]}
|
|
>
|
|
{preprocessLatex(result.markdown_content || '')}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<ExportSidebar
|
|
isOpen={isExportSidebarOpen}
|
|
onClose={() => setIsExportSidebarOpen(false)}
|
|
result={result}
|
|
/>
|
|
</div >
|
|
);
|
|
}
|