初始化提交

2025-09-14 02:05:42 +08:00
parent 1a3730454e
commit 9f94e92eaf
19 changed files with 385 additions and 322 deletions
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -8,18 +8,18 @@ export const Header: React.FC = () => {

  return (
    <>
-      <header className="h-16 bg-gray-950 border-b border-gray-800 flex items-center justify-between px-6">
+      <header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6">
        <div className="flex items-center space-x-4">
          <div className="flex items-center space-x-2">
            <div className="text-2xl">🍌</div>
-            <h1 className="text-xl font-semibold text-gray-100 hidden md:block">
-              Nano Banana AI Image Editor
+            <h1 className="text-xl font-semibold text-gray-900 hidden md:block">
+              Nano Banana AI 图像编辑器
            </h1>
-            <h1 className="text-xl font-semibold text-gray-100 md:hidden">
-              NB Editor
+            <h1 className="text-xl font-semibold text-gray-900 md:hidden">
+              NB 编辑器
            </h1>
          </div>
-          <div className="text-xs text-gray-500 bg-gray-800 px-2 py-1 rounded">
+          <div className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
            1.0
          </div>
        </div>
--- a/src/components/HistoryPanel.tsx
+++ b/src/components/HistoryPanel.tsx
@@ -34,7 +34,7 @@ export const HistoryPanel: React.FC = () => {
  const generations = currentProject?.generations || [];
  const edits = currentProject?.edits || [];

-  // Get current image dimensions
+  // 获取当前图像尺寸
  const [imageDimensions, setImageDimensions] = React.useState<{ width: number; height: number } | null>(null);
  
  React.useEffect(() => {
@@ -51,11 +51,11 @@ export const HistoryPanel: React.FC = () => {

  if (!showHistory) {
    return (
-      <div className="w-8 bg-gray-950 border-l border-gray-800 flex flex-col items-center justify-center">
+      <div className="w-8 bg-white border-l border-gray-200 flex flex-col items-center justify-center">
        <button
          onClick={() => setShowHistory(true)}
-          className="w-6 h-16 bg-gray-800 hover:bg-gray-700 rounded-l-lg border border-r-0 border-gray-700 flex items-center justify-center transition-colors group"
-          title="Show History Panel"
+          className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-l-lg border border-r-0 border-gray-300 flex items-center justify-center transition-colors group"
+          title="显示历史面板"
        >
          <div className="flex flex-col space-y-1">
            <div className="w-1 h-1 bg-gray-500 group-hover:bg-gray-400 rounded-full"></div>
@@ -68,35 +68,35 @@ export const HistoryPanel: React.FC = () => {
  }

  return (
-    <div className="w-80 bg-gray-950 border-l border-gray-800 p-6 flex flex-col h-full">
-      {/* Header */}
+    <div className="w-80 bg-white border-l border-gray-200 p-6 flex flex-col h-full">
+      {/* 头部 */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center space-x-2">
          <History className="h-5 w-5 text-gray-400" />
-          <h3 className="text-sm font-medium text-gray-300">History & Variants</h3>
+          <h3 className="text-sm font-medium text-gray-300">历史记录和变体</h3>
        </div>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => setShowHistory(!showHistory)}
          className="h-6 w-6"
-          title="Hide History Panel"
+          title="隐藏历史面板"
        >
          ×
        </Button>
      </div>

-      {/* Variants Grid */}
+      {/* 变体网格 */}
      <div className="mb-6 flex-shrink-0">
-        <h4 className="text-xs font-medium text-gray-400 mb-3">Current Variants</h4>
+        <h4 className="text-xs font-medium text-gray-400 mb-3">当前变体</h4>
        {generations.length === 0 && edits.length === 0 ? (
          <div className="text-center py-8">
            <div className="text-4xl mb-2">🖼️</div>
-            <p className="text-sm text-gray-500">No generations yet</p>
+            <p className="text-sm text-gray-500">暂无生成记录</p>
          </div>
        ) : (
          <div className="grid grid-cols-2 gap-3">
-            {/* Show generations */}
+            {/* 显示生成记录 */}
            {generations.slice(-2).map((generation, index) => (
              <div
                key={generation.id}
@@ -117,7 +117,7 @@ export const HistoryPanel: React.FC = () => {
                  <>
                    <img
                      src={generation.outputAssets[0].url}
-                      alt="Generated variant"
+                      alt="生成的变体"
                      className="w-full h-full object-cover"
                    />
                  </>
@@ -127,14 +127,14 @@ export const HistoryPanel: React.FC = () => {
                  </div>
                )}
                
-                {/* Variant Number */}
+                {/* 变体编号 */}
                <div className="absolute top-2 left-2 bg-gray-900/80 text-xs px-2 py-1 rounded">
                  #{index + 1}
                </div>
              </div>
            ))}
            
-            {/* Show edits */}
+            {/* 显示编辑记录 */}
            {edits.slice(-2).map((edit, index) => (
              <div
                key={edit.id}
@@ -155,7 +155,7 @@ export const HistoryPanel: React.FC = () => {
                {edit.outputAssets[0] ? (
                  <img
                    src={edit.outputAssets[0].url}
-                    alt="Edited variant"
+                    alt="编辑的变体"
                    className="w-full h-full object-cover"
                  />
                ) : (
@@ -164,9 +164,9 @@ export const HistoryPanel: React.FC = () => {
                  </div>
                )}
                
-                {/* Edit Label */}
+                {/* 编辑标签 */}
                <div className="absolute top-2 left-2 bg-purple-900/80 text-xs px-2 py-1 rounded">
-                  Edit #{index + 1}
+                  编辑 #{index + 1}
                </div>
              </div>
            ))}
@@ -174,28 +174,28 @@ export const HistoryPanel: React.FC = () => {
        )}
      </div>

-      {/* Current Image Info */}
+      {/* 当前图像信息 */}
      {(canvasImage || imageDimensions) && (
-        <div className="mb-4 p-3 bg-gray-900 rounded-lg border border-gray-700">
-          <h4 className="text-xs font-medium text-gray-400 mb-2">Current Image</h4>
+        <div className="mb-4 p-3 bg-gray-100 rounded-lg border border-gray-300">
+          <h4 className="text-xs font-medium text-gray-400 mb-2">当前图像</h4>
          <div className="space-y-1 text-xs text-gray-500">
            {imageDimensions && (
              <div className="flex justify-between">
-                <span>Dimensions:</span>
+                <span>尺寸:</span>
                <span className="text-gray-300">{imageDimensions.width} × {imageDimensions.height}</span>
              </div>
            )}
            <div className="flex justify-between">
-              <span>Mode:</span>
+              <span>模式:</span>
              <span className="text-gray-300 capitalize">{selectedTool}</span>
            </div>
          </div>
        </div>
      )}

-      {/* Generation Details */}
-      <div className="mb-6 p-4 bg-gray-900 rounded-lg border border-gray-700 flex-1 overflow-y-auto min-h-0">
-        <h4 className="text-xs font-medium text-gray-400 mb-2">Generation Details</h4>
+      {/* 生成详情 */}
+      <div className="mb-6 p-4 bg-gray-100 rounded-lg border border-gray-300 flex-1 overflow-y-auto min-h-0">
+        <h4 className="text-xs font-medium text-gray-400 mb-2">生成详情</h4>
        {(() => {
          const gen = generations.find(g => g.id === selectedGenerationId);
          const selectedEdit = edits.find(e => e.id === selectedEditId);
@@ -205,25 +205,25 @@ export const HistoryPanel: React.FC = () => {
              <div className="space-y-3">
                <div className="space-y-2 text-xs text-gray-500">
                  <div>
-                    <span className="text-gray-400">Prompt:</span>
+                    <span className="text-gray-400">提示:</span>
                    <p className="text-gray-300 mt-1">{gen.prompt}</p>
                  </div>
                  <div className="flex justify-between">
-                    <span>Model:</span>
+                    <span>模型:</span>
                    <span>{gen.modelVersion}</span>
                  </div>
                  {gen.parameters.seed && (
                    <div className="flex justify-between">
-                      <span>Seed:</span>
+                      <span>种子:</span>
                      <span>{gen.parameters.seed}</span>
                    </div>
                  )}
                </div>
                
-                {/* Reference Images */}
+                {/* 参考图像 */}
                {gen.sourceAssets.length > 0 && (
                  <div>
-                    <h5 className="text-xs font-medium text-gray-400 mb-2">Reference Images</h5>
+                    <h5 className="text-xs font-medium text-gray-400 mb-2">参考图像</h5>
                    <div className="grid grid-cols-2 gap-2">
                      {gen.sourceAssets.map((asset, index) => (
                        <button
@@ -231,21 +231,21 @@ export const HistoryPanel: React.FC = () => {
                          onClick={() => setPreviewModal({
                            open: true,
                            imageUrl: asset.url,
-                            title: `Reference Image ${index + 1}`,
-                            description: 'This reference image was used to guide the generation'
+                            title: `参考图像 ${index + 1}`,
+                            description: '此参考图像用于指导生成'
                          })}
                          className="relative aspect-square rounded border border-gray-700 hover:border-gray-600 transition-colors overflow-hidden group"
                        >
                          <img
                            src={asset.url}
-                            alt={`Reference ${index + 1}`}
+                            alt={`参考 ${index + 1}`}
                            className="w-full h-full object-cover"
                          />
                          <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
                            <ImageIcon className="h-4 w-4 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
                          </div>
                          <div className="absolute bottom-1 left-1 bg-gray-900/80 text-xs px-1 py-0.5 rounded text-gray-300">
-                            Ref {index + 1}
+                            参考 {index + 1}
                          </div>
                        </button>
                      ))}
@@ -260,41 +260,41 @@ export const HistoryPanel: React.FC = () => {
              <div className="space-y-3">
                <div className="space-y-2 text-xs text-gray-500">
                  <div>
-                    <span className="text-gray-400">Edit Instruction:</span>
+                    <span className="text-gray-400">编辑指令:</span>
                    <p className="text-gray-300 mt-1">{selectedEdit.instruction}</p>
                  </div>
                  <div className="flex justify-between">
-                    <span>Type:</span>
-                    <span>Image Edit</span>
+                    <span>类型:</span>
+                    <span>图像编辑</span>
                  </div>
                  <div className="flex justify-between">
-                    <span>Created:</span>
+                    <span>创建时间:</span>
                    <span>{new Date(selectedEdit.timestamp).toLocaleTimeString()}</span>
                  </div>
                  {selectedEdit.maskAssetId && (
                    <div className="flex justify-between">
-                      <span>Mask:</span>
-                      <span className="text-purple-400">Applied</span>
+                      <span>遮罩:</span>
+                      <span className="text-purple-400">已应用</span>
                    </div>
                  )}
                </div>
                
-                {/* Parent Generation Reference */}
+                {/* 原始生成参考 */}
                {parentGen && (
                  <div>
-                    <h5 className="text-xs font-medium text-gray-400 mb-2">Original Image</h5>
+                    <h5 className="text-xs font-medium text-gray-400 mb-2">原始图像</h5>
                    <button
                      onClick={() => setPreviewModal({
                        open: true,
                        imageUrl: parentGen.outputAssets[0]?.url || '',
-                        title: 'Original Image',
-                        description: 'The base image that was edited'
+                        title: '原始图像',
+                        description: '被编辑的基础图像'
                      })}
                      className="relative aspect-square w-16 rounded border border-gray-700 hover:border-gray-600 transition-colors overflow-hidden group"
                    >
                      <img
                        src={parentGen.outputAssets[0]?.url}
-                        alt="Original"
+                        alt="原始"
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
@@ -304,29 +304,29 @@ export const HistoryPanel: React.FC = () => {
                  </div>
                )}
                
-                {/* Mask Visualization */}
+                {/* 遮罩可视化 */}
                {selectedEdit.maskReferenceAsset && (
                  <div>
-                    <h5 className="text-xs font-medium text-gray-400 mb-2">Masked Reference</h5>
+                    <h5 className="text-xs font-medium text-gray-400 mb-2">遮罩参考</h5>
                    <button
                      onClick={() => setPreviewModal({
                        open: true,
                        imageUrl: selectedEdit.maskReferenceAsset!.url,
-                        title: 'Masked Reference Image',
-                        description: 'This image with mask overlay was sent to the AI model to guide the edit'
+                        title: '遮罩参考图像',
+                        description: '带有遮罩叠加的图像被发送到AI模型以指导编辑'
                      })}
                      className="relative aspect-square w-16 rounded border border-gray-700 hover:border-gray-600 transition-colors overflow-hidden group"
                    >
                      <img
                        src={selectedEdit.maskReferenceAsset.url}
-                        alt="Masked reference"
+                        alt="遮罩参考"
                        className="w-full h-full object-cover"
                      />
                      <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
                        <ImageIcon className="h-3 w-3 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
                      </div>
                      <div className="absolute bottom-1 left-1 bg-purple-900/80 text-xs px-1 py-0.5 rounded text-purple-300">
-                        Mask
+                        遮罩
                      </div>
                    </button>
                  </div>
@@ -336,34 +336,34 @@ export const HistoryPanel: React.FC = () => {
          } else {
            return (
              <div className="space-y-2 text-xs text-gray-500">
-                <p className="text-gray-400">Select a generation or edit to view details</p>
+                <p className="text-gray-400">选择一个生成记录或编辑记录以查看详细信息</p>
              </div>
            );
          }
        })()}
      </div>

-      {/* Actions */}
+      {/* 操作 */}
      <div className="space-y-3 flex-shrink-0">
        <Button 
          variant="outline" 
          size="sm" 
          className="w-full"
          onClick={() => {
-            // Find the currently displayed image (either generation or edit)
+            // 查找当前显示的图像（生成记录或编辑记录）
            let imageUrl: string | null = null;
            
            if (selectedGenerationId) {
              const gen = generations.find(g => g.id === selectedGenerationId);
              imageUrl = gen?.outputAssets[0]?.url || null;
            } else {
-              // If no generation selected, try to get the current canvas image
+              // 如果没有选择生成记录，尝试获取当前画布图像
              const { canvasImage } = useAppStore.getState();
              imageUrl = canvasImage;
            }
            
            if (imageUrl) {
-              // Handle both data URLs and regular URLs
+              // 处理数据URL和常规URL
              if (imageUrl.startsWith('data:')) {
                const link = document.createElement('a');
                link.href = imageUrl;
@@ -372,7 +372,7 @@ export const HistoryPanel: React.FC = () => {
                link.click();
                document.body.removeChild(link);
              } else {
-                // For external URLs, we need to fetch and convert to blob
+                // 对于外部URL，我们需要获取并转换为blob
                fetch(imageUrl)
                  .then(response => response.blob())
                  .then(blob => {
@@ -391,11 +391,11 @@ export const HistoryPanel: React.FC = () => {
          disabled={!selectedGenerationId && !useAppStore.getState().canvasImage}
        >
          <Download className="h-4 w-4 mr-2" />
-          Download
+          下载
        </Button>
      </div>
      
-      {/* Image Preview Modal */}
+      {/* 图像预览模态框 */}
      <ImagePreviewModal
        open={previewModal.open}
        onOpenChange={(open) => setPreviewModal(prev => ({ ...prev, open }))}
--- a/src/components/ImageCanvas.tsx
+++ b/src/components/ImageCanvas.tsx
@@ -29,18 +29,18 @@ export const ImageCanvas: React.FC = () => {
  const [isDrawing, setIsDrawing] = useState(false);
  const [currentStroke, setCurrentStroke] = useState<number[]>([]);

-  // Load image and auto-fit when canvasImage changes
+  // 加载图像并在 canvasImage 变化时自动适应
  useEffect(() => {
    if (canvasImage) {
      const img = new window.Image();
      img.onload = () => {
        setImage(img);
        
-        // Only auto-fit if this is a new image (no existing zoom/pan state)
+        // 仅在这是新图像时自动适应（没有现有的缩放/平移状态）
        if (canvasZoom === 1 && canvasPan.x === 0 && canvasPan.y === 0) {
-          // Auto-fit image to canvas
+          // 自动适应图像到画布
          const isMobile = window.innerWidth < 768;
-          const padding = isMobile ? 0.9 : 0.8; // Use more of the screen on mobile
+          const padding = isMobile ? 0.9 : 0.8; // 在移动设备上使用更多屏幕空间
          
          const scaleX = (stageSize.width * padding) / img.width;
          const scaleY = (stageSize.height * padding) / img.height;
@@ -50,7 +50,7 @@ export const ImageCanvas: React.FC = () => {
          
          setCanvasZoom(optimalZoom);
          
-          // Center the image
+          // 居中图像
          setCanvasPan({ x: 0, y: 0 });
        }
      };
@@ -60,7 +60,7 @@ export const ImageCanvas: React.FC = () => {
    }
  }, [canvasImage, stageSize, setCanvasZoom, setCanvasPan, canvasZoom, canvasPan]);

-  // Handle stage resize
+  // 处理舞台大小调整
  useEffect(() => {
    const updateSize = () => {
      const container = document.getElementById('canvas-container');
@@ -84,18 +84,18 @@ export const ImageCanvas: React.FC = () => {
    const stage = e.target.getStage();
    const pos = stage.getPointerPosition();
    
-    // Use Konva's getRelativePointerPosition for accurate coordinates
+    // 使用 Konva 的 getRelativePointerPosition 获取准确坐标
    const relativePos = stage.getRelativePointerPosition();
    
-    // Calculate image bounds on the stage
+    // 计算图像在舞台上的边界
    const imageX = (stageSize.width / canvasZoom - image.width) / 2;
    const imageY = (stageSize.height / canvasZoom - image.height) / 2;
    
-    // Convert to image-relative coordinates
+    // 转换为相对于图像的坐标
    const relativeX = relativePos.x - imageX;
    const relativeY = relativePos.y - imageY;
    
-    // Check if click is within image bounds
+    // 检查点击是否在图像边界内
    if (relativeX >= 0 && relativeX <= image.width && relativeY >= 0 && relativeY <= image.height) {
      setCurrentStroke([relativeX, relativeY]);
    }
@@ -107,18 +107,18 @@ export const ImageCanvas: React.FC = () => {
    const stage = e.target.getStage();
    const pos = stage.getPointerPosition();
    
-    // Use Konva's getRelativePointerPosition for accurate coordinates
+    // 使用 Konva 的 getRelativePointerPosition 获取准确坐标
    const relativePos = stage.getRelativePointerPosition();
    
-    // Calculate image bounds on the stage
+    // 计算图像在舞台上的边界
    const imageX = (stageSize.width / canvasZoom - image.width) / 2;
    const imageY = (stageSize.height / canvasZoom - image.height) / 2;
    
-    // Convert to image-relative coordinates
+    // 转换为相对于图像的坐标
    const relativeX = relativePos.x - imageX;
    const relativeY = relativePos.y - imageY;
    
-    // Check if within image bounds
+    // 检查是否在图像边界内
    if (relativeX >= 0 && relativeX <= image.width && relativeY >= 0 && relativeY <= image.height) {
      setCurrentStroke([...currentStroke, relativeX, relativeY]);
    }
@@ -174,10 +174,10 @@ export const ImageCanvas: React.FC = () => {

  return (
    <div className="flex flex-col h-full">
-      {/* Toolbar */}
-      <div className="p-3 border-b border-gray-800 bg-gray-950">
+      {/* 工具栏 */}
+      <div className="p-3 border-b border-gray-200 bg-white">
        <div className="flex items-center justify-between">
-          {/* Left side - Zoom controls */}
+          {/* 左侧 - 缩放控制 */}
          <div className="flex items-center space-x-2">
            <Button variant="outline" size="sm" onClick={() => handleZoom(-0.1)}>
              <ZoomOut className="h-4 w-4" />
@@ -193,12 +193,12 @@ export const ImageCanvas: React.FC = () => {
            </Button>
          </div>

-          {/* Right side - Tools and actions */}
+          {/* 右侧 - 工具和操作 */}
          <div className="flex items-center space-x-2">
            {selectedTool === 'mask' && (
              <>
                <div className="flex items-center space-x-2 mr-2">
-                  <span className="text-xs text-gray-400">Brush:</span>
+                  <span className="text-xs text-gray-400">画笔:</span>
                  <input
                    type="range"
                    min="5"
@@ -227,35 +227,35 @@ export const ImageCanvas: React.FC = () => {
              className={cn(showMasks && 'bg-yellow-400/10 border-yellow-400/50')}
            >
              {showMasks ? <Eye className="h-4 w-4" /> : <EyeOff className="h-4 w-4" />}
-              <span className="hidden sm:inline ml-2">Masks</span>
+              <span className="hidden sm:inline ml-2">遮罩</span>
            </Button>
            
            {canvasImage && (
              <Button variant="secondary" size="sm" onClick={handleDownload}>
                <Download className="h-4 w-4 mr-2" />
-                <span className="hidden sm:inline">Download</span>
+                <span className="hidden sm:inline">下载</span>
              </Button>
            )}
          </div>
        </div>
      </div>

-      {/* Canvas Area */}
+      {/* 画布区域 */}
      <div 
        id="canvas-container" 
-        className="flex-1 relative overflow-hidden bg-gray-800"
+        className="flex-1 relative overflow-hidden bg-gray-100"
      >
        {!image && !isGenerating && (
          <div className="absolute inset-0 flex items-center justify-center">
            <div className="text-center">
              <div className="text-6xl mb-4">🍌</div>
              <h2 className="text-xl font-medium text-gray-300 mb-2">
-                Welcome to Nano Banana Framework
+                欢迎使用 Nano Banana 框架
              </h2>
              <p className="text-gray-500 max-w-md">
                {selectedTool === 'generate' 
-                  ? 'Start by describing what you want to create in the prompt box'
-                  : 'Upload an image to begin editing'
+                  ? '首先在提示框中描述您想要创建的内容'
+                  : '上传图像开始编辑'
                }
              </p>
            </div>
@@ -266,7 +266,7 @@ export const ImageCanvas: React.FC = () => {
          <div className="absolute inset-0 flex items-center justify-center bg-gray-900/50">
            <div className="text-center">
              <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-yellow-400 mb-4" />
-              <p className="text-gray-300">Creating your image...</p>
+              <p className="text-gray-300">正在创建您的图像...</p>
            </div>
          </div>
        )}
@@ -302,7 +302,7 @@ export const ImageCanvas: React.FC = () => {
              />
            )}
            
-            {/* Brush Strokes */}
+            {/* 画笔描边 */}
            {showMasks && brushStrokes.map((stroke) => (
              <Line
                key={stroke.id}
@@ -319,7 +319,7 @@ export const ImageCanvas: React.FC = () => {
              />
            ))}
            
-            {/* Current stroke being drawn */}
+            {/* 正在绘制的当前描边 */}
            {isDrawing && currentStroke.length > 2 && (
              <Line
                points={currentStroke}
@@ -338,12 +338,12 @@ export const ImageCanvas: React.FC = () => {
        </Stage>
      </div>

-      {/* Status Bar */}
-      <div className="p-3 border-t border-gray-800 bg-gray-950">
+      {/* 状态栏 */}
+      <div className="p-3 border-t border-gray-200 bg-white">
        <div className="flex items-center justify-between text-xs text-gray-500">
          <div className="flex items-center space-x-4">
            {brushStrokes.length > 0 && (
-              <span className="text-yellow-400">{brushStrokes.length} brush stroke{brushStrokes.length !== 1 ? 's' : ''}</span>
+              <span className="text-yellow-400">{brushStrokes.length} 个画笔描边{brushStrokes.length !== 1 ? 's' : ''}</span>
            )}
          </div>
          
@@ -361,7 +361,7 @@ export const ImageCanvas: React.FC = () => {
            </span>
            <span className="text-gray-600 hidden md:inline">•</span>
            <span className="text-yellow-400 hidden md:inline">⚡</span>
-            <span className="hidden md:inline">Powered by Gemini 2.5 Flash Image</span>
+            <span className="hidden md:inline">由 Gemini 2.5 Flash Image 提供支持</span>
          </div>
        </div>
      </div>
--- a/src/components/ImagePreviewModal.tsx
+++ b/src/components/ImagePreviewModal.tsx
@@ -21,10 +21,10 @@ export const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/80 z-50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-900 border border-gray-700 rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto z-50">
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white border border-gray-200 rounded-lg p-6 w-full max-w-2xl max-h-[90vh] overflow-y-auto z-50">
          <div className="flex items-center justify-between mb-4">
-            <Dialog.Title className="text-lg font-semibold text-gray-100">
+            <Dialog.Title className="text-lg font-semibold text-gray-900">
              {title}
            </Dialog.Title>
            <Dialog.Close asChild>
@@ -36,14 +36,14 @@ export const ImagePreviewModal: React.FC<ImagePreviewModalProps> = ({
          
          <div className="space-y-4">
            {description && (
-              <p className="text-sm text-gray-400">{description}</p>
+              <p className="text-sm text-gray-600">{description}</p>
            )}
            
-            <div className="bg-gray-800 rounded-lg p-4">
+            <div className="bg-gray-100 rounded-lg p-4">
              <img
                src={imageUrl}
                alt={title}
-                className="w-full h-auto rounded-lg border border-gray-700"
+                className="w-full h-auto rounded-lg border border-gray-200"
              />
            </div>
          </div>
--- a/src/components/InfoModal.tsx
+++ b/src/components/InfoModal.tsx
@@ -13,10 +13,10 @@ export const InfoModal: React.FC<InfoModalProps> = ({ open, onOpenChange }) => {
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-900 border border-gray-700 rounded-lg p-6 w-full max-w-4xl z-50">
+        <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white border border-gray-200 rounded-lg p-6 w-full max-w-4xl z-50">
          <div className="flex items-center justify-between mb-4">
-            <Dialog.Title className="text-lg font-semibold text-gray-100">
-              About Nano Banana AI Image Editor
+            <Dialog.Title className="text-lg font-semibold text-gray-900">
+              关于 Nano Banana AI 图像编辑器
            </Dialog.Title>
            <Dialog.Close asChild>
              <Button variant="ghost" size="icon" className="h-6 w-6">
@@ -26,59 +26,60 @@ export const InfoModal: React.FC<InfoModalProps> = ({ open, onOpenChange }) => {
          </div>
          
          <div className="space-y-4">
-            <div className="space-y-3 text-sm text-gray-300">
+            <div className="space-y-3 text-sm text-gray-700">
              <p>
-                Developed by{' '}
+                由{' '}
                <a
                  href="https://markfulton.com"
                  target="_blank"
                  rel="noopener noreferrer"
-                  className="text-yellow-400 hover:text-yellow-300 transition-colors font-semibold"
+                  className="text-yellow-600 hover:text-yellow-700 transition-colors font-semibold"
                >
                  Mark Fulton
                  <ExternalLink className="h-3 w-3 inline ml-1" />
                </a>
+                开发
              </p>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div className="p-4 bg-gradient-to-br from-purple-900/30 to-indigo-900/30 rounded-lg border border-purple-500/30">
+                <div className="p-4 bg-gradient-to-br from-purple-100 to-indigo-100 rounded-lg border border-purple-200">
                  <div className="flex items-center mb-3">
-                    <Lightbulb className="h-5 w-5 text-purple-400 mr-2" />
-                    <h4 className="text-sm font-semibold text-purple-300">
-                      Learn to Build AI Apps & More Solutions
+                    <Lightbulb className="h-5 w-5 text-purple-600 mr-2" />
+                    <h4 className="text-sm font-semibold text-purple-700">
+                      学习构建AI应用和其他解决方案
                    </h4>
                  </div>
-                  <p className="text-sm text-gray-300 mb-4">
-                    Learn to vibe code apps like this one and master AI automation, build intelligent agents, and create cutting-edge solutions that drive real business results.
+                  <p className="text-sm text-gray-700 mb-4">
+                    学习编写像这样的应用程序，掌握AI自动化，构建智能代理，并创建推动实际业务成果的前沿解决方案。
                  </p>
                  <a
                    href="https://www.reinventing.ai/"
                    target="_blank"
                    rel="noopener noreferrer"
-                    className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-500 hover:to-indigo-500 text-white rounded-lg transition-all duration-200 font-medium"
+                    className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 text-white rounded-lg transition-all duration-200 font-medium"
                  >
-                    Join the AI Accelerator Program
+                    加入AI加速器计划
                    <ExternalLink className="h-4 w-4 ml-1" />
                  </a>
                </div>
                
-                <div className="p-4 bg-gradient-to-br from-yellow-900/30 to-orange-900/30 rounded-lg border border-yellow-500/30">
+                <div className="p-4 bg-gradient-to-br from-yellow-100 to-orange-100 rounded-lg border border-yellow-200">
                  <div className="flex items-center mb-3">
-                    <Download className="h-5 w-5 text-yellow-400 mr-2" />
-                    <h4 className="text-sm font-semibold text-yellow-300">
-                      Get a Copy of This App
+                    <Download className="h-5 w-5 text-yellow-600 mr-2" />
+                    <h4 className="text-sm font-semibold text-yellow-700">
+                      获取此应用程序的副本
                    </h4>
                  </div>
-                  <p className="text-sm text-gray-300 mb-4">
-                    Get a copy of this app by joining the Vibe Coding is Life Skool community. Live build sessions, app projects, resources and more in the best vibe coding community on the web.
+                  <p className="text-sm text-gray-700 mb-4">
+                    通过加入Vibe Coding is Life Skool社区获取此应用程序的副本。现场构建会话、应用程序项目、资源等，这是网络上最好的氛围编码社区。
                  </p>
                  <a
                    href="https://www.skool.com/vibe-coding-is-life/about?ref=456537abaf37491cbcc6976f3c26af41"
                    target="_blank"
                    rel="noopener noreferrer"
-                    className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-yellow-600 to-orange-600 hover:from-yellow-500 hover:to-orange-500 text-white rounded-lg transition-all duration-200 font-medium"
+                    className="inline-flex items-center px-4 py-2 bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white rounded-lg transition-all duration-200 font-medium"
                  >
-                    Join Vibe Coding is Life Community
+                    加入Vibe Coding is Life社区
                    <ExternalLink className="h-4 w-4 ml-1" />
                  </a>
                </div>
--- a/src/components/PromptComposer.tsx
+++ b/src/components/PromptComposer.tsx
@@ -39,6 +39,7 @@ export const PromptComposer: React.FC = () => {
  const [showAdvanced, setShowAdvanced] = useState(false);
  const [showClearConfirm, setShowClearConfirm] = useState(false);
  const [showHintsModal, setShowHintsModal] = useState(false);
+  const [isDragOver, setIsDragOver] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleGenerate = () => {
@@ -60,39 +61,64 @@ export const PromptComposer: React.FC = () => {
    }
  };

-  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
+  const handleFileUpload = async (file: File) => {
    if (file && file.type.startsWith('image/')) {
      try {
        const base64 = await blobToBase64(file);
        const dataUrl = `data:${file.type};base64,${base64}`;
        
        if (selectedTool === 'generate') {
-          // Add to reference images (max 2)
+          // 添加到参考图像（最多2张）
          if (uploadedImages.length < 2) {
            addUploadedImage(dataUrl);
          }
        } else if (selectedTool === 'edit') {
-          // For edit mode, add to separate edit reference images (max 2)
+          // 编辑模式下，添加到单独的编辑参考图像（最多2张）
          if (editReferenceImages.length < 2) {
            addEditReferenceImage(dataUrl);
          }
-          // Set as canvas image if none exists
+          // 如果没有画布图像，则设置为画布图像
          if (!canvasImage) {
            setCanvasImage(dataUrl);
          }
        } else if (selectedTool === 'mask') {
-          // For mask mode, set as canvas image immediately
+          // 遮罩模式下，立即设置为画布图像
          clearUploadedImages();
          addUploadedImage(dataUrl);
          setCanvasImage(dataUrl);
        }
      } catch (error) {
-        console.error('Failed to upload image:', error);
+        console.error('上传图像失败:', error);
      }
    }
  };

+  const handleFileInputChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      await handleFileUpload(file);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragOver(true);
+  };
+
+  const handleDragLeave = () => {
+    setIsDragOver(false);
+  };
+
+  const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setIsDragOver(false);
+    
+    const file = event.dataTransfer.files?.[0];
+    if (file) {
+      await handleFileUpload(file);
+    }
+  };
+
  const handleClearSession = () => {
    setCurrentPrompt('');
    clearUploadedImages();
@@ -105,18 +131,18 @@ export const PromptComposer: React.FC = () => {
  };

  const tools = [
-    { id: 'generate', icon: Wand2, label: 'Generate', description: 'Create from text' },
-    { id: 'edit', icon: Edit3, label: 'Edit', description: 'Modify existing' },
-    { id: 'mask', icon: MousePointer, label: 'Select', description: 'Click to select' },
+    { id: 'generate', icon: Wand2, label: '生成', description: '从文本创建' },
+    { id: 'edit', icon: Edit3, label: '编辑', description: '修改现有图像' },
+    { id: 'mask', icon: MousePointer, label: '选择', description: '点击选择' },
  ] as const;

  if (!showPromptPanel) {
    return (
-      <div className="w-8 bg-gray-950 border-r border-gray-800 flex flex-col items-center justify-center">
+      <div className="w-8 bg-white border-r border-gray-200 flex flex-col items-center justify-center">
        <button
          onClick={() => setShowPromptPanel(true)}
-          className="w-6 h-16 bg-gray-800 hover:bg-gray-700 rounded-r-lg border border-l-0 border-gray-700 flex items-center justify-center transition-colors group"
-          title="Show Prompt Panel"
+          className="w-6 h-16 bg-gray-100 hover:bg-gray-200 rounded-r-lg border border-l-0 border-gray-300 flex items-center justify-center transition-colors group"
+          title="显示提示面板"
        >
          <div className="flex flex-col space-y-1">
            <div className="w-1 h-1 bg-gray-500 group-hover:bg-gray-400 rounded-full"></div>
@@ -130,10 +156,10 @@ export const PromptComposer: React.FC = () => {

  return (
    <>
-    <div className="w-80 lg:w-72 xl:w-80 h-full bg-gray-950 border-r border-gray-800 p-6 flex flex-col space-y-6 overflow-y-auto">
+    <div className="w-80 lg:w-72 xl:w-80 h-full bg-white border-r border-gray-200 p-6 flex flex-col space-y-6 overflow-y-auto">
      <div>
        <div className="flex items-center justify-between mb-3">
-          <h3 className="text-sm font-medium text-gray-300">Mode</h3>
+          <h3 className="text-sm font-medium text-gray-300">模式</h3>
          <div className="flex items-center space-x-1">
            <Button
              variant="ghost"
@@ -148,7 +174,7 @@ export const PromptComposer: React.FC = () => {
              size="icon"
              onClick={() => setShowPromptPanel(false)}
              className="h-6 w-6"
-              title="Hide Prompt Panel"
+              title="隐藏提示面板"
            >
              ×
            </Button>
@@ -163,7 +189,7 @@ export const PromptComposer: React.FC = () => {
                'flex flex-col items-center p-3 rounded-lg border transition-all duration-200',
                selectedTool === tool.id
                  ? 'bg-yellow-400/10 border-yellow-400/50 text-yellow-400'
-                  : 'bg-gray-900 border-gray-700 text-gray-400 hover:bg-gray-800 hover:text-gray-300'
+                  : 'bg-white border-yellow-400/50 text-gray-400 hover:bg-yellow-400 hover:text-white'
              )}
            >
              <tool.icon className="h-5 w-5 mb-1" />
@@ -173,42 +199,69 @@ export const PromptComposer: React.FC = () => {
        </div>
      </div>

-      {/* File Upload */}
+      {/* 文件上传 */}
      <div>
-        <div>
-          <label className="text-sm font-medium text-gray-300 mb-1 block">
-            {selectedTool === 'generate' ? 'Reference Images' : selectedTool === 'edit' ? 'Style References' : 'Upload Image'}
-          </label>
-          {selectedTool === 'mask' && (
-            <p className="text-xs text-gray-400 mb-3">Edit an image with masks</p>
-          )}
-          {selectedTool === 'generate' && (
-            <p className="text-xs text-gray-500 mb-3">Optional, up to 2 images</p>
-          )}
-          {selectedTool === 'edit' && (
-            <p className="text-xs text-gray-500 mb-3">
-              {canvasImage ? 'Optional style references, up to 2 images' : 'Upload image to edit, up to 2 images'}
-            </p>
-          )}
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/*"
-            onChange={handleFileUpload}
-            className="hidden"
-          />
-          <Button
-            variant="outline"
-            onClick={() => fileInputRef.current?.click()}
-            className="w-full"
-            disabled={
-              (selectedTool === 'generate' && uploadedImages.length >= 2) ||
-              (selectedTool === 'edit' && editReferenceImages.length >= 2)
-            }
+        <div
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            className={cn(
+              "border-2 border-dashed rounded-lg p-6 text-center transition-colors",
+              isDragOver 
+                ? "border-yellow-400 bg-yellow-400/10" 
+                : "border-gray-300 hover:border-yellow-400"
+            )}
          >
-            <Upload className="h-4 w-4 mr-2" />
-            Upload
-          </Button>
+            <label className="text-sm font-medium text-gray-700 mb-1 block">
+              {selectedTool === 'generate' ? '参考图像' : selectedTool === 'edit' ? '样式参考' : '上传图像'}
+            </label>
+            {selectedTool === 'mask' && (
+              <p className="text-xs text-gray-500 mb-3">使用遮罩编辑图像</p>
+            )}
+            {selectedTool === 'generate' && (
+              <p className="text-xs text-gray-500 mb-3">可选，最多2张图像</p>
+            )}
+            {selectedTool === 'edit' && (
+              <p className="text-xs text-gray-500 mb-3">
+                {canvasImage ? '可选样式参考，最多2张图像' : '上传要编辑的图像，最多2张图像'}
+              </p>
+            )}
+            
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept="image/*"
+              onChange={handleFileInputChange}
+              className="hidden"
+            />
+            
+            <div className="flex flex-col items-center justify-center space-y-3">
+              <Upload className={cn("h-8 w-8", isDragOver ? "text-yellow-500" : "text-gray-400")} />
+              <div>
+                <p className={cn(
+                  "text-sm font-medium",
+                  isDragOver ? "text-yellow-700" : "text-gray-600"
+                )}>
+                  {isDragOver ? "释放文件以上传" : "拖拽图像到此处或点击上传"}
+                </p>
+                <p className="text-xs text-gray-500 mt-1">
+                  支持 JPG, PNG, GIF 格式
+                </p>
+              </div>
+              <Button
+                variant="outline"
+                onClick={() => fileInputRef.current?.click()}
+                className="mt-2"
+                disabled={
+                  (selectedTool === 'generate' && uploadedImages.length >= 2) ||
+                  (selectedTool === 'edit' && editReferenceImages.length >= 2)
+                }
+              >
+                <Upload className="h-4 w-4 mr-2" />
+                选择文件
+              </Button>
+            </div>
+          </div>
          
          {/* Show uploaded images preview */}
          {((selectedTool === 'generate' && uploadedImages.length > 0) || 
@@ -218,45 +271,44 @@ export const PromptComposer: React.FC = () => {
                <div key={index} className="relative">
                  <img
                    src={image}
-                    alt={`Reference ${index + 1}`}
-                    className="w-full h-20 object-cover rounded-lg border border-gray-700"
+                    alt={`参考图像 ${index + 1}`}
+                    className="w-full h-20 object-cover rounded-lg border border-gray-300"
                  />
                  <button
                    onClick={() => selectedTool === 'generate' ? removeUploadedImage(index) : removeEditReferenceImage(index)}
-                    className="absolute top-1 right-1 bg-gray-900/80 text-gray-400 hover:text-gray-200 rounded-full p-1 transition-colors"
+                    className="absolute top-1 right-1 bg-gray-100/80 text-gray-600 hover:text-gray-800 rounded-full p-1 transition-colors"
                  >
                    ×
                  </button>
-                  <div className="absolute bottom-1 left-1 bg-gray-900/80 text-xs px-2 py-1 rounded text-gray-300">
-                    Ref {index + 1}
+                  <div className="absolute bottom-1 left-1 bg-gray-100/80 text-xs px-2 py-1 rounded text-gray-700">
+                    参考 {index + 1}
                  </div>
                </div>
              ))}
            </div>
          )}
-        </div>
      </div>

-      {/* Prompt Input */}
+      {/* 提示输入 */}
      <div>
-        <label className="text-sm font-medium text-gray-300 mb-3 block">
-          {selectedTool === 'generate' ? 'Describe what you want to create' : 'Describe your changes'}
+        <label className="text-sm font-medium text-gray-700 mb-3 block">
+          {selectedTool === 'generate' ? '描述您想要创建的内容' : '描述您的修改'}
        </label>
        <Textarea
          value={currentPrompt}
          onChange={(e) => setCurrentPrompt(e.target.value)}
          placeholder={
            selectedTool === 'generate'
-              ? 'A serene mountain landscape at sunset with a lake reflecting the golden sky...'
-              : 'Make the sky more dramatic, add storm clouds...'
+              ? '宁静的山景日落，湖面倒映着金色的天空...'
+              : '让天空更加戏剧化，添加暴风云...'
          }
          className="min-h-[120px] resize-none"
        />
        
-        {/* Prompt Quality Indicator */}
+        {/* 提示质量指示器 */}
        <button 
          onClick={() => setShowHintsModal(true)}
-          className="mt-2 flex items-center text-xs hover:text-gray-400 transition-colors group"
+          className="mt-2 flex items-center text-xs hover:text-gray-600 transition-colors group"
        >
          {currentPrompt.length < 20 ? (
            <HelpCircle className="h-3 w-3 mr-2 text-red-500 group-hover:text-red-400" />
@@ -266,15 +318,15 @@ export const PromptComposer: React.FC = () => {
              currentPrompt.length < 50 ? 'bg-yellow-500' : 'bg-green-500'
            )} />
          )}
-          <span className="text-gray-500 group-hover:text-gray-400">
-            {currentPrompt.length < 20 ? 'Add detail for better results' :
-             currentPrompt.length < 50 ? 'Good detail level' : 'Excellent prompt detail'}
+          <span className="text-gray-600 group-hover:text-gray-800">
+            {currentPrompt.length < 20 ? '添加更多细节以获得更好的结果' :
+             currentPrompt.length < 50 ? '细节水平良好' : '提示细节优秀'}
          </span>
        </button>
      </div>


-      {/* Generate Button */}
+      {/* 生成按钮 */}
      <Button
        onClick={handleGenerate}
        disabled={isGenerating || !currentPrompt.trim()}
@@ -283,38 +335,38 @@ export const PromptComposer: React.FC = () => {
        {isGenerating ? (
          <>
            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-900 mr-2" />
-            Generating...
+            生成中...
          </>
        ) : (
          <>
            <Wand2 className="h-4 w-4 mr-2" />
-            {selectedTool === 'generate' ? 'Generate' : 'Apply Edit'}
+            {selectedTool === 'generate' ? '生成' : '应用编辑'}
          </>
        )}
      </Button>

-      {/* Advanced Controls */}
+      {/* 高级控制 */}
      <div>
        <button
          onClick={() => setShowAdvanced(!showAdvanced)}
-          className="flex items-center text-sm text-gray-400 hover:text-gray-300 transition-colors duration-200"
+          className="flex items-center text-sm text-gray-600 hover:text-gray-800 transition-colors duration-200"
        >
          {showAdvanced ? <ChevronDown className="h-4 w-4 mr-1" /> : <ChevronRight className="h-4 w-4 mr-1" />}
-          {showAdvanced ? 'Hide' : 'Show'} Advanced Controls
+          {showAdvanced ? '隐藏' : '显示'} 高级控制
        </button>
        
        <button
          onClick={() => setShowClearConfirm(!showClearConfirm)}
-          className="flex items-center text-sm text-gray-400 hover:text-red-400 transition-colors duration-200 mt-2"
+          className="flex items-center text-sm text-gray-600 hover:text-red-500 transition-colors duration-200 mt-2"
        >
          <RotateCcw className="h-4 w-4 mr-2" />
-          Clear Session
+          清除会话
        </button>
        
        {showClearConfirm && (
-          <div className="mt-3 p-3 bg-gray-800 rounded-lg border border-gray-700">
-            <p className="text-xs text-gray-300 mb-3">
-              Are you sure you want to clear this session? This will remove all uploads, prompts, and canvas content.
+          <div className="mt-3 p-3 bg-gray-100 rounded-lg border border-gray-300">
+            <p className="text-xs text-gray-600 mb-3">
+              您确定要清除此会话吗？这将删除所有上传、提示和画布内容。
            </p>
            <div className="flex space-x-2">
              <Button
@@ -323,7 +375,7 @@ export const PromptComposer: React.FC = () => {
                onClick={handleClearSession}
                className="flex-1"
              >
-                Yes, Clear
+                确认清除
              </Button>
              <Button
                variant="outline"
@@ -331,7 +383,7 @@ export const PromptComposer: React.FC = () => {
                onClick={() => setShowClearConfirm(false)}
                className="flex-1"
              >
-                Cancel
+                取消
              </Button>
            </div>
          </div>
@@ -339,10 +391,10 @@ export const PromptComposer: React.FC = () => {
        
        {showAdvanced && (
          <div className="mt-4 space-y-4">
-            {/* Temperature */}
+            {/* 创造力 */}
            <div>
-              <label className="text-xs text-gray-400 mb-2 block">
-                Creativity ({temperature})
+              <label className="text-xs text-gray-600 mb-2 block">
+                创造力 ({temperature})
              </label>
              <input
                type="range"
@@ -351,55 +403,55 @@ export const PromptComposer: React.FC = () => {
                step="0.1"
                value={temperature}
                onChange={(e) => setTemperature(parseFloat(e.target.value))}
-                className="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider"
+                className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider"
              />
            </div>
            
-            {/* Seed */}
+            {/* 种子 */}
            <div>
-              <label className="text-xs text-gray-400 mb-2 block">
-                Seed (optional)
+              <label className="text-xs text-gray-600 mb-2 block">
+                种子 (可选)
              </label>
              <input
                type="number"
                value={seed || ''}
                onChange={(e) => setSeed(e.target.value ? parseInt(e.target.value) : null)}
-                placeholder="Random"
-                className="w-full h-8 px-2 bg-gray-900 border border-gray-700 rounded text-xs text-gray-100"
+                placeholder="随机"
+                className="w-full h-8 px-2 bg-white border border-gray-300 rounded text-xs text-gray-900"
              />
            </div>
          </div>
        )}
      </div>

-      {/* Keyboard Shortcuts */}
-      <div className="pt-4 border-t border-gray-800">
-        <h4 className="text-xs font-medium text-gray-400 mb-2">Shortcuts</h4>
-        <div className="space-y-1 text-xs text-gray-500">
+      {/* 键盘快捷键 */}
+      <div className="pt-4 border-t border-gray-200">
+        <h4 className="text-xs font-medium text-gray-600 mb-2">快捷键</h4>
+        <div className="space-y-1 text-xs text-gray-700">
          <div className="flex justify-between">
-            <span>Generate</span>
+            <span>生成</span>
            <span>⌘ + Enter</span>
          </div>
          <div className="flex justify-between">
-            <span>Re-roll</span>
+            <span>重新生成</span>
            <span>⇧ + R</span>
          </div>
          <div className="flex justify-between">
-            <span>Edit mode</span>
+            <span>编辑模式</span>
            <span>E</span>
          </div>
          <div className="flex justify-between">
-            <span>History</span>
+            <span>历史记录</span>
            <span>H</span>
          </div>
          <div className="flex justify-between">
-            <span>Toggle Panel</span>
+            <span>切换面板</span>
            <span>P</span>
          </div>
        </div>
      </div>
    </div>
-    {/* Prompt Hints Modal */}
+    {/* 提示提示模态框 */}
    <PromptHints open={showHintsModal} onOpenChange={setShowHintsModal} />
    </>
  );
--- a/src/components/PromptHints.tsx
+++ b/src/components/PromptHints.tsx
@@ -49,11 +49,11 @@ export const PromptHints: React.FC<PromptHintsProps> = ({ open, onOpenChange })
  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
-        <Dialog.Overlay className="fixed inset-0 bg-black/50 z-50" />
-        <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-gray-900 border border-gray-700 rounded-lg p-6 w-full max-w-md max-h-[80vh] overflow-y-auto z-50">
+        <Dialog.Overlay className="fixed inset-0 bg-black/30 z-50" />
+        <Dialog.Content className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white border border-gray-200 rounded-lg p-6 w-full max-w-md max-h-[80vh] overflow-y-auto z-50">
          <div className="flex items-center justify-between mb-4">
-            <Dialog.Title className="text-lg font-semibold text-gray-100">
-              Prompt Quality Tips
+            <Dialog.Title className="text-lg font-semibold text-gray-900">
+              提示质量技巧
            </Dialog.Title>
            <Dialog.Close asChild>
              <Button variant="ghost" size="icon" className="h-6 w-6">
@@ -68,15 +68,15 @@ export const PromptHints: React.FC<PromptHintsProps> = ({ open, onOpenChange })
                <div className={`inline-block px-2 py-1 rounded text-xs border ${categoryColors[hint.category]}`}>
                  {hint.category}
                </div>
-                <p className="text-sm text-gray-300">{hint.text}</p>
+                <p className="text-sm text-gray-700">{hint.text}</p>
                <p className="text-sm text-gray-500 italic">{hint.example}</p>
              </div>
            ))}
            
-            <div className="p-4 bg-gray-800 rounded-lg border border-gray-700 mt-6">
-              <p className="text-sm text-gray-300">
-                <strong className="text-yellow-400">Best practice:</strong> Write full sentences that describe the complete scene, 
-                not just keywords. Think "paint me a picture with words."
+            <div className="p-4 bg-gray-100 rounded-lg border border-gray-200 mt-6">
+              <p className="text-sm text-gray-700">
+                <strong className="text-yellow-600">最佳实践:</strong> 写完整的句子来描述整个场景，
+                而不仅仅是关键词。想象"用文字为我画一幅画"。
              </p>
            </div>
          </div>
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -8,10 +8,10 @@ const buttonVariants = cva(
    variants: {
      variant: {
        default: 'bg-yellow-400 text-gray-900 hover:bg-yellow-300 focus-visible:ring-yellow-400',
-        secondary: 'bg-gray-800 text-gray-100 hover:bg-gray-700 focus-visible:ring-gray-600',
-        outline: 'border border-gray-600 bg-transparent text-gray-300 hover:bg-gray-800 hover:text-gray-100',
-        ghost: 'text-gray-400 hover:bg-gray-800 hover:text-gray-100',
-        destructive: 'bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500',
+        secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus-visible:ring-gray-300',
+        outline: 'border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-100 hover:text-gray-900',
+        ghost: 'text-gray-500 hover:bg-gray-100 hover:text-gray-900',
+        destructive: 'bg-red-500 text-white hover:bg-red-600 focus-visible:ring-red-400',
      },
      size: {
        default: 'h-10 px-4 py-2',
--- a/src/components/ui/Input.tsx
+++ b/src/components/ui/Input.tsx
@@ -9,7 +9,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
      <input
        type={type}
        className={cn(
-          'flex h-10 w-full rounded-lg border border-gray-600 bg-gray-900 px-3 py-2 text-sm text-gray-100 ring-offset-gray-900 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
          className
        )}
        ref={ref}
--- a/src/components/ui/Textarea.tsx
+++ b/src/components/ui/Textarea.tsx
@@ -8,7 +8,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
    return (
      <textarea
        className={cn(
-          'flex min-h-[80px] w-full rounded-lg border border-gray-600 bg-gray-900 px-3 py-2 text-sm text-gray-100 ring-offset-gray-900 placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none',
+          'flex min-h-[80px] w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 ring-offset-white placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-none',
          className
        )}
        ref={ref}