OCR

resources/views/video/index.blade.php

@@ -19,6 +19,9 @@
             </a>
         </div>
 
+        <div class="flex flex-col lg:flex-row gap-8">
+        <div class="flex-grow min-w-0">
+
         <!-- Desktop Table -->
         <div class="hidden lg:block bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg mb-8">
             <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
@@ -154,11 +157,39 @@
                         导入直播弹幕
                     </a>
                 @endif
+                <a href="{{ url(route("ocr.construct.import.page", ["video_bvid"=>$video->bvid])) }}" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                    导入OCR结果
+                </a>
             </div>
         @endauth
+        </div>
+
+        @if($ocr_urls->isNotEmpty())
+            <div class="w-full lg:w-72 flex-shrink-0" id="ocr-panel" data-urls="{{ $ocr_urls->toJson() }}">
+                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 lg:sticky lg:top-20">
+                    <h2 class="text-lg font-bold text-gray-900 dark:text-white mb-3">右侧栏 OCR</h2>
+                    @if($ocr_urls->count() > 1)
+                        <div class="flex flex-wrap gap-2 mb-3">
+                            @foreach($ocr_urls as $part_num => $ocr_url)
+                                <button type="button" data-ocr-part="{{ $part_num }}" class="px-2 py-1 text-sm rounded border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-indigo-500 transition-colors">P{{ $part_num }}</button>
+                            @endforeach
+                        </div>
+                    @endif
+                    <canvas class="w-full bg-black rounded"></canvas>
+                    <input type="range" min="0" max="0" step="1" value="0" class="w-full mt-3 accent-indigo-600">
+                    <div data-ocr-time class="text-xs text-gray-500 dark:text-gray-400 mt-1"></div>
+                    <div data-ocr-status class="text-xs text-gray-400 dark:text-gray-500 mt-1" style="display:none"></div>
+                </div>
+            </div>
+        @endif
+        </div>
 
     </div>
 </main>
+@if($ocr_urls->isNotEmpty())
+    <script src="{{ mix('/js/component/ocr_canvas.js') }}"></script>
+    <script>document.addEventListener("DOMContentLoaded", function () { OcrCanvas.initPlayer(document.getElementById("ocr-panel")); });</script>
+@endif
 @include("common.footer")
 </body>
 </html>