Add image zoom modal with enhanced viewing controls

frontend/src/components/Base64Image.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Box, CircularProgress, Typography, IconButton, Snackbar, Alert } from '@mui/material';
 import type { SxProps, Theme } from '@mui/material';
-import { Image as ImageIcon, ErrorOutline as ErrorIcon, Download as DownloadIcon, ContentCopy as CopyIcon } from '@mui/icons-material';
+import { Image as ImageIcon, ErrorOutline as ErrorIcon, Download as DownloadIcon, ContentCopy as CopyIcon, ZoomIn as ZoomInIcon } from '@mui/icons-material';
 import { copyImageToClipboard, isClipboardSupported } from '../utils/clipboard';
 
 interface Base64ImageProps {
@@ -13,6 +13,7 @@ interface Base64ImageProps {
   downloadFileName?: string;
   clickable?: boolean;
   onClick?: () => void;
+  onExpandClick?: () => void;
   sx?: SxProps<Theme>;
 }
 
@@ -62,6 +63,13 @@ const Base64Image: React.FC<Base64ImageProps> = (props) => {
     }
   };
 
+  const handleExpand = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (props.onExpandClick) {
+      props.onExpandClick();
+    }
+  };
+
   const handleClick = () => {
     if (props.clickable && props.onClick) {
       props.onClick();
@@ -131,6 +139,26 @@ const Base64Image: React.FC<Base64ImageProps> = (props) => {
                 gap: 0.5,
               }}
             >
+              {/* Expand Button */}
+              {props.onExpandClick && (
+                <IconButton
+                  onClick={handleExpand}
+                  sx={{
+                    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                    color: 'white',
+                    '&:hover': {
+                      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+                    },
+                    width: 32,
+                    height: 32,
+                  }}
+                  size="small"
+                  title="Enlarge image"
+                >
+                  <ZoomInIcon fontSize="small" />
+                </IconButton>
+              )}
+
               {/* Copy Button */}
               <IconButton
                 onClick={handleCopy}
@@ -148,7 +176,7 @@ const Base64Image: React.FC<Base64ImageProps> = (props) => {
               >
                 <CopyIcon fontSize="small" />
               </IconButton>
-              
+
               {/* Download Button */}
               <IconButton
                 onClick={handleDownload}

frontend/src/components/ImageDisplay.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Box, Typography } from '@mui/material';
 import Base64Image from './Base64Image';
+import ImageModal from './ImageModal';
 
 interface ImageData {
   base64?: string;
@@ -29,12 +30,24 @@ const ImageDisplay: React.FC<ImageDisplayProps> = ({
   loadingMessage = "画像を生成中...",
   downloadFileName,
 }) => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const handleOpenModal = () => {
+    if (images.length > 0 && !loading) {
+      setModalOpen(true);
+    }
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+  };
+
   return (
     <Box sx={{ flex: { xs: 1, lg: 2 }, maxWidth: { lg: '67%' } }}>
       <Typography variant="h6" gutterBottom>
         {title}
       </Typography>
-      
+
       {/* メイン画像表示エリア */}
       <Box
         sx={{
@@ -46,6 +59,7 @@ const ImageDisplay: React.FC<ImageDisplayProps> = ({
           backgroundColor: '#fafafa',
           borderRadius: 1,
           mb: 2,
+          position: 'relative',
         }}
       >
         {images.length === 0 && !loading && (
@@ -68,6 +82,7 @@ const ImageDisplay: React.FC<ImageDisplayProps> = ({
             error={images[selectedImageIndex]?.error}
             errorMessage={images[selectedImageIndex]?.errorMessage}
             downloadFileName={downloadFileName}
+            onExpandClick={handleOpenModal}
             sx={{
               width: '100%',
               height: '100%',
@@ -102,6 +117,16 @@ const ImageDisplay: React.FC<ImageDisplayProps> = ({
           ))}
         </Box>
       )}
+
+      {/* Image Modal */}
+      <ImageModal
+        open={modalOpen}
+        onClose={handleCloseModal}
+        images={images}
+        currentIndex={selectedImageIndex}
+        onIndexChange={onSelectImage}
+        downloadFileName={downloadFileName}
+      />
     </Box>
   );
 };