fix: ui issue

ui/components/canvas/CanvasToolbar.tsx

@@ -1,32 +1,38 @@
 'use client'
 
-import { Toolbar, Tooltip } from 'radix-ui'
-import { useCanvasCommands } from '@/hooks/useCanvasCommands'
+import { Toolbar, Slider } from 'radix-ui'
+import { useAppStore, useConfigStore } from '@/lib/store'
 
 export function CanvasToolbar() {
-  const { commands, llmReady } = useCanvasCommands()
+  const llmReady = useAppStore((state) => state.llmReady)
+  const {
+    maskConfig: { brushSize },
+    setMaskConfig,
+  } = useConfigStore()
 
   return (
-    <Toolbar.Root className='flex items-center gap-1 border-b border-neutral-200 bg-white px-2 py-1.5 text-xs text-neutral-900'>
-      {commands.map((item) => (
-        <Tooltip.Root key={item.label} delayDuration={0}>
-          <Tooltip.Trigger asChild>
-            <Toolbar.Button
-              onClick={item.action}
-              disabled={item.disabled}
-              className='rounded border border-neutral-200 bg-white px-2.5 py-1 font-semibold hover:bg-neutral-100 disabled:opacity-40 data-[state=on]:bg-neutral-900 data-[state=on]:text-white'
-            >
-              {item.label}
-            </Toolbar.Button>
-          </Tooltip.Trigger>
-          <Tooltip.Content
-            sideOffset={6}
-            className='rounded bg-black px-2 py-1 text-xs text-white'
+    <Toolbar.Root className='flex items-center gap-4 border-b border-neutral-200 bg-white px-3 py-1.5 text-xs text-neutral-900'>
+      <div className='flex items-center gap-2'>
+        <span className='text-neutral-600'>Brush</span>
+        <div className='w-40'>
+          <Slider.Root
+            className='relative flex h-4 w-full touch-none items-center select-none'
+            min={8}
+            max={128}
+            step={4}
+            value={[brushSize]}
+            onValueChange={(vals) =>
+              setMaskConfig({ brushSize: vals[0] ?? brushSize })
+            }
           >
-            Run {item.label.toLowerCase()}
-          </Tooltip.Content>
-        </Tooltip.Root>
-      ))}
+            <Slider.Track className='relative h-1 flex-1 rounded bg-rose-100'>
+              <Slider.Range className='absolute h-full rounded bg-rose-400' />
+            </Slider.Track>
+            <Slider.Thumb className='block h-2.5 w-2.5 rounded-full bg-rose-500' />
+          </Slider.Root>
+        </div>
+        <span className='w-14 text-right tabular-nums'>{brushSize}px</span>
+      </div>
       <span
         className={`ml-auto rounded-full px-2 py-1 text-xs ${
           llmReady ? 'bg-rose-100 text-rose-700' : 'bg-rose-50 text-rose-400'

ui/components/canvas/Workspace.tsx

@@ -17,7 +17,8 @@ const MASK_CURSOR =
   'url(\'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16"%3E%3Ccircle cx="8" cy="8" r="4" stroke="black" stroke-width="1.5" fill="white"/%3E%3C/svg%3E\') 8 8, crosshair'
 
 export function Workspace() {
-  const { scale, showSegmentationMask, showInpaintedImage, mode } = useAppStore()
+  const { scale, showSegmentationMask, showInpaintedImage, mode } =
+    useAppStore()
   const {
     document: currentDocument,
     selectedBlockIndex,
@@ -99,16 +100,19 @@ export function Workspace() {
                     >
                       <Layer>
                         <Image data={currentDocument.image} />
-                        <Image
-                          data={currentDocument.segment}
-                          visible={showSegmentationMask}
-                          opacity={0.45}
-                        />
-                        <Image
-                          data={currentDocument.inpainted}
-                          visible={showInpaintedImage}
-                          opacity={0.95}
-                        />
+                        {currentDocument?.segment && (
+                          <Image
+                            data={currentDocument.segment}
+                            visible={showSegmentationMask}
+                            opacity={0.8}
+                          />
+                        )}
+                        {currentDocument.inpainted && (
+                          <Image
+                            data={currentDocument.inpainted}
+                            visible={showInpaintedImage}
+                          />
+                        )}
                       </Layer>
                       <Layer>
                         <TextBlockAnnotations

ui/components/panels/MaskControls.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useState } from 'react'
 import { Separator } from 'radix-ui'
 import { useAppStore, useConfigStore } from '@/lib/store'
 import {
@@ -18,7 +17,6 @@ export function MaskControls() {
     inpaint,
   } = useAppStore()
   const { inpaintConfig, setInpaintConfig } = useConfigStore()
-  const [brushSize, setBrushSize] = useState(36)
 
   return (
     <div className='space-y-2 text-xs text-neutral-600'>
@@ -33,14 +31,6 @@ export function MaskControls() {
         onChange={setShowInpaintedImage}
       />
       <Separator.Root className='my-1 h-px bg-neutral-200' />
-      <SliderField
-        label='Brush size'
-        min={8}
-        max={128}
-        step={4}
-        value={brushSize}
-        onChange={setBrushSize}
-      />
       <div className='grid grid-cols-2 gap-1.5'>
         <SliderField
           label='Dilate'

ui/components/panels/TextBlocksPanel.tsx

@@ -88,13 +88,12 @@ function BlockCard({ block, index, selected, onChange }: BlockCardProps) {
       className='overflow-hidden rounded border border-neutral-200 bg-white/90 text-sm transition data-[selected=true]:border-rose-400 data-[state=open]:shadow-sm'
     >
       <Accordion.Header>
-        <Accordion.Trigger className='flex w-full flex-col gap-1 px-3 py-2 text-left transition outline-none data-[state=open]:bg-rose-50'>
+        <Accordion.Trigger className='flex w-full cursor-pointer flex-col gap-1 px-3 py-2 text-left transition outline-none data-[state=open]:bg-rose-50'>
           <div className='flex items-center justify-between text-xs text-neutral-500'>
-            <span className='font-semibold text-neutral-800'>
-              Block {index + 1}
-            </span>
-            <span className='text-[11px] tracking-wide text-neutral-400 uppercase'>
-              Click to edit
+            <span className='inline-flex items-center gap-2'>
+              <span className='rounded-full bg-rose-100 px-2 py-0.5 text-[11px] font-semibold text-rose-700'>
+                #{index + 1}
+              </span>
             </span>
           </div>
           {!selected && (

ui/hooks/useCanvasCommands.ts

@@ -1,60 +0,0 @@
-'use client'
-
-import { useCallback, useMemo } from 'react'
-import { useAppStore, useConfigStore } from '@/lib/store'
-
-export type CanvasCommand = {
-  label: string
-  action: () => void
-  disabled: boolean
-}
-
-export function useCanvasCommands() {
-  const { detect, ocr, inpaint, llmGenerate, documents, llmReady } =
-    useAppStore()
-  const { detectConfig, inpaintConfig } = useConfigStore()
-
-  const hasDocument = documents.length > 0
-
-  const runDetect = useCallback(() => {
-    if (!hasDocument) return
-    detect(detectConfig.confThreshold, detectConfig.nmsThreshold)
-  }, [
-    detect,
-    detectConfig.confThreshold,
-    detectConfig.nmsThreshold,
-    hasDocument,
-  ])
-
-  const runOcr = useCallback(() => {
-    if (!hasDocument) return
-    ocr()
-  }, [hasDocument, ocr])
-
-  const runInpaint = useCallback(() => {
-    if (!hasDocument) return
-    inpaint(inpaintConfig.dilateKernelSize, inpaintConfig.erodeDistance)
-  }, [
-    hasDocument,
-    inpaint,
-    inpaintConfig.dilateKernelSize,
-    inpaintConfig.erodeDistance,
-  ])
-
-  const runTranslate = useCallback(() => {
-    if (!hasDocument) return
-    llmGenerate()
-  }, [hasDocument, llmGenerate])
-
-  const commands = useMemo<CanvasCommand[]>(
-    () => [
-      { label: 'Detect', action: runDetect, disabled: !hasDocument },
-      { label: 'OCR', action: runOcr, disabled: !hasDocument },
-      { label: 'Inpaint', action: runInpaint, disabled: !hasDocument },
-      { label: 'Translate', action: runTranslate, disabled: !hasDocument },
-    ],
-    [hasDocument, runDetect, runOcr, runInpaint, runTranslate],
-  )
-
-  return { commands, llmReady }
-}

ui/lib/store.ts

@@ -177,8 +177,12 @@ type ConfigState = {
     dilateKernelSize: number
     erodeDistance: number
   }
+  maskConfig: {
+    brushSize: number
+  }
   setDetectConfig: (config: Partial<ConfigState['detectConfig']>) => void
   setInpaintConfig: (config: Partial<ConfigState['inpaintConfig']>) => void
+  setMaskConfig: (config: Partial<ConfigState['maskConfig']>) => void
 }
 
 export const useConfigStore = create<ConfigState>((set) => ({
@@ -190,6 +194,9 @@ export const useConfigStore = create<ConfigState>((set) => ({
     dilateKernelSize: 9,
     erodeDistance: 3,
   },
+  maskConfig: {
+    brushSize: 36,
+  },
   setDetectConfig: (config) =>
     set((state) => ({
       detectConfig: { ...state.detectConfig, ...config },
@@ -198,4 +205,8 @@ export const useConfigStore = create<ConfigState>((set) => ({
     set((state) => ({
       inpaintConfig: { ...state.inpaintConfig, ...config },
     })),
+  setMaskConfig: (config) =>
+    set((state) => ({
+      maskConfig: { ...state.maskConfig, ...config },
+    })),
 }))