{"version":3,"sources":["components/ImageUploader.js","components/ModelSelector.js","components/VectorDBActions.js","components/ResultDisplay.js","components/LlmAnalysis.js","App.js","reportWebVitals.js","index.js"],"names":["useStyles","makeStyles","theme","paper","padding","spacing","display","flexDirection","alignItems","height","minHeight","transition","dragActive","border","backgroundColor","dragInactive","uploadBox","justifyContent","width","cursor","uploadIcon","fontSize","color","marginBottom","supportText","marginTop","previewBox","position","imageContainer","overflow","deleteButton","top","right","ImageUploader","_ref","onImageUpload","classes","previewUrl","setPreviewUrl","useState","setDragActive","fileInputRef","useRef","handleDrag","e","preventDefault","stopPropagation","type","handleFiles","file","startsWith","URL","createObjectURL","alert","React","createElement","Paper","className","concat","onDragEnter","onDragLeave","onDragOver","onDrop","dataTransfer","files","ref","accept","onChange","target","style","Box","Typography","variant","gutterBottom","src","alt","IconButton","aria-label","onClick","handleRemoveImage","current","value","DeleteIcon","onButtonClick","click","CloudUploadIcon","Button","component","startIcon","card","selectedCard","unavailableCard","opacity","cardContent","flexGrow","chipContainer","successChip","errorChip","modelType","processButton","textAlign","ModelSelector","onModelSelect","onProcess","isProcessing","modelsStatus","selectedModel","imageSelected","models","id","name","description","icon","VisibilityIcon","available","yolo","detr","CategoryIcon","vit","handleModelClick","modelId","find","m","sx","p","Grid","container","map","model","item","xs","sm","key","Card","CardContent","mb","Chip","label","size","CardActions","disabled","fullWidth","PlayArrowIcon","root","borderRadius","shape","button","marginRight","searchDialog","minWidth","formControl","searchResults","resultCard","resultImage","objectFit","chip","margin","similarityChip","palette","primary","main","VectorDBActions","results","isSaving","setIsSaving","saveSuccess","setSaveSuccess","saveError","setSaveError","openSearchDialog","setOpenSearchDialog","searchType","setSearchType","searchClass","setSearchClass","setSearchResults","isSearching","setIsSearching","searchError","setSearchError","data","handleCloseSearchDialog","generateUUID","replace","c","r","Math","random","toString","async","response","fetch","method","headers","body","JSON","stringify","image","metadata","classifications","objects","detections","imageId","ok","Error","status","result","json","error","setTimeout","err","console","message","Fragment","CircularProgress","handleOpenSearchDialog","Alert","severity","Snackbar","open","autoHideDuration","onClose","Dialog","maxWidth","DialogTitle","DialogContent","FormControl","InputLabel","Select","labelId","event","MenuItem","TextField","placeholder","marginLeft","log","length","index","similarity","distance","image_data","CardMedia","class","toFixed","confidence","DialogActions","requestBody","n_results","trim","class_name","success","Array","isArray","maxHeight","dividerMargin","gap","flexWrap","ResultDisplay","bgcolor","renderPerformanceInfo","performance","Divider","ms","undefined","isNaN","num","Number","formatTime","inference_time","device","md","List","detection","ListItem","ListItemText","secondary","bbox","join","top_predictions","prediction","rank","probability","responseBox","whiteSpace","buttonProgress","LlmAnalysis","visionResults","userQuery","setUserQuery","isAnalyzing","setIsAnalyzing","analysisResult","setAnalysisResult","setError","mt","createMuiTheme","typography","fontFamily","App","selectedImage","setSelectedImage","setSelectedModel","setIsProcessing","setResults","setModelsStatus","useEffect","then","catch","ThemeProvider","AppBar","Toolbar","Container","paragraph","formData","FormData","append","endpoint","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.ad7f086c.chunk.js","sourcesContent":["import React, { useState, useRef } from 'react';\nimport { \n  Paper, \n  Typography, \n  Box, \n  Button, \n  IconButton \n} from '@material-ui/core';\nimport CloudUploadIcon from '@material-ui/icons/CloudUpload';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  paper: {\n    padding: theme.spacing(2),\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    height: '100%',\n    minHeight: 300,\n    transition: 'all 0.3s ease'\n  },\n  dragActive: {\n    border: '2px dashed #3f51b5',\n    backgroundColor: 'rgba(63, 81, 181, 0.05)'\n  },\n  dragInactive: {\n    border: '2px dashed #ccc',\n    backgroundColor: 'white'\n  },\n  uploadBox: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    justifyContent: 'center',\n    height: '100%',\n    width: '100%',\n    cursor: 'pointer'\n  },\n  uploadIcon: {\n    fontSize: 60,\n    color: '#3f51b5',\n    marginBottom: theme.spacing(2)\n  },\n  supportText: {\n    marginTop: theme.spacing(2)\n  },\n  previewBox: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    width: '100%',\n    height: '100%',\n    position: 'relative'\n  },\n  imageContainer: {\n    position: 'relative',\n    width: '100%',\n    height: '100%',\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    overflow: 'hidden',\n    marginTop: theme.spacing(2)\n  },\n  deleteButton: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n    backgroundColor: 'rgba(255, 255, 255, 0.7)',\n    '&:hover': {\n      backgroundColor: 'rgba(255, 255, 255, 0.9)',\n    }\n  }\n}));\n\nconst ImageUploader = ({ onImageUpload }) => {\n  const classes = useStyles();\n  const [previewUrl, setPreviewUrl] = useState(null);\n  const [dragActive, setDragActive] = useState(false);\n  const fileInputRef = useRef(null);\n\n  const handleDrag = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (e.type === 'dragenter' || e.type === 'dragover') {\n      setDragActive(true);\n    } else if (e.type === 'dragleave') {\n      setDragActive(false);\n    }\n  };\n\n  const handleDrop = (e) => {\n    e.preventDefault();\n    e.stopPropagation();\n    setDragActive(false);\n    if (e.dataTransfer.files && e.dataTransfer.files[0]) {\n      handleFiles(e.dataTransfer.files[0]);\n    }\n  };\n\n  const handleChange = (e) => {\n    e.preventDefault();\n    if (e.target.files && e.target.files[0]) {\n      handleFiles(e.target.files[0]);\n    }\n  };\n\n  const handleFiles = (file) => {\n    if (file.type.startsWith('image/')) {\n      setPreviewUrl(URL.createObjectURL(file));\n      onImageUpload(file);\n    } else {\n      alert('Please upload an image file');\n    }\n  };\n\n  const onButtonClick = () => {\n    fileInputRef.current.click();\n  };\n\n  const handleRemoveImage = () => {\n    setPreviewUrl(null);\n    onImageUpload(null);\n    fileInputRef.current.value = \"\";\n  };\n\n  return (\n    <Paper \n      className={`${classes.paper} ${dragActive ? classes.dragActive : classes.dragInactive}`}\n      onDragEnter={handleDrag}\n      onDragLeave={handleDrag}\n      onDragOver={handleDrag}\n      onDrop={handleDrop}\n    >\n      <input\n        ref={fileInputRef}\n        type=\"file\"\n        accept=\"image/*\"\n        onChange={handleChange}\n        style={{ display: 'none' }}\n      />\n\n      {!previewUrl ? (\n        <Box \n          className={classes.uploadBox}\n          onClick={onButtonClick}\n        >\n          <CloudUploadIcon className={classes.uploadIcon} />\n          <Typography variant=\"h6\" gutterBottom>\n            Drag & Drop an image here\n          </Typography>\n          <Typography variant=\"body2\" color=\"textSecondary\" gutterBottom>\n            or\n          </Typography>\n          <Button\n            variant=\"contained\"\n            color=\"primary\"\n            component=\"span\"\n            startIcon={<CloudUploadIcon />}\n          >\n            Browse Files\n          </Button>\n          <Typography variant=\"body2\" color=\"textSecondary\" className={classes.supportText}>\n            Supported formats: JPG, PNG, GIF\n          </Typography>\n        </Box>\n      ) : (\n        <Box className={classes.previewBox}>\n          <Typography variant=\"h6\" gutterBottom>\n            Preview\n          </Typography>\n          <Box className={classes.imageContainer}>\n            <img\n              src={previewUrl}\n              alt=\"Preview\"\n              className=\"preview-image\"\n            />\n            <IconButton\n              aria-label=\"delete\"\n              className={classes.deleteButton}\n              onClick={handleRemoveImage}\n            >\n              <DeleteIcon />\n            </IconButton>\n          </Box>\n        </Box>\n      )}\n    </Paper>\n  );\n};\n\nexport default ImageUploader;\n","import React from 'react';\nimport { \n  Grid, \n  Card, \n  CardContent, \n  CardActions, \n  Typography, \n  Button, \n  Chip,\n  Box\n} from '@material-ui/core';\nimport VisibilityIcon from '@material-ui/icons/Visibility';\nimport CategoryIcon from '@material-ui/icons/Category';\nimport PlayArrowIcon from '@material-ui/icons/PlayArrow';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  card: {\n    height: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n  },\n  selectedCard: {\n    border: '2px solid #3f51b5',\n  },\n  unavailableCard: {\n    opacity: 0.6,\n  },\n  cardContent: {\n    flexGrow: 1,\n  },\n  chipContainer: {\n    marginBottom: theme.spacing(1.5),\n  },\n  successChip: {\n    backgroundColor: '#34C759',\n    color: '#fff',\n  },\n  errorChip: {\n    backgroundColor: '#FF3B3F',\n    color: '#fff',\n  },\n  modelType: {\n    marginTop: theme.spacing(1),\n  },\n  processButton: {\n    marginTop: theme.spacing(3),\n    textAlign: 'center',\n  }\n}));\n\nconst ModelSelector = ({ \n  onModelSelect, \n  onProcess, \n  isProcessing, \n  modelsStatus, \n  selectedModel,\n  imageSelected \n}) => {\n  const classes = useStyles();\n  \n  const models = [\n    {\n      id: 'yolo',\n      name: 'YOLOv8',\n      description: 'Fast and accurate object detection',\n      icon: <VisibilityIcon />,\n      available: modelsStatus.yolo\n    },\n    {\n      id: 'detr',\n      name: 'DETR',\n      description: 'DEtection TRansformer for object detection',\n      icon: <VisibilityIcon />,\n      available: modelsStatus.detr\n    },\n    {\n      id: 'vit',\n      name: 'ViT',\n      description: 'Vision Transformer for image classification',\n      icon: <CategoryIcon />,\n      available: modelsStatus.vit\n    }\n  ];\n\n  const handleModelClick = (modelId) => {\n    if (models.find(m => m.id === modelId).available) {\n      onModelSelect(modelId);\n    }\n  };\n\n  return (\n    <Box sx={{ p: 2, height: '100%' }}>\n      <Typography variant=\"h6\" gutterBottom>\n        Select Model\n      </Typography>\n      \n      <Grid container spacing={2}>\n        {models.map((model) => (\n          <Grid item xs={12} sm={4} key={model.id}>\n            <Card \n              className={`\n                ${classes.card} \n                ${selectedModel === model.id ? classes.selectedCard : ''} \n                ${!model.available ? classes.unavailableCard : ''}\n              `}\n              onClick={() => handleModelClick(model.id)}\n            >\n              <CardContent className={classes.cardContent}>\n                <Box sx={{ mb: 2, color: 'primary' }}>\n                  {model.icon}\n                </Box>\n                <Typography variant=\"h5\" component=\"div\" gutterBottom>\n                  {model.name}\n                </Typography>\n                <div className={classes.chipContainer}>\n                  {model.available ? (\n                    <Chip \n                      label=\"Available\" \n                      className={classes.successChip}\n                      size=\"small\" \n                    />\n                  ) : (\n                    <Chip \n                      label=\"Not Available\" \n                      className={classes.errorChip}\n                      size=\"small\" \n                    />\n                  )}\n                </div>\n                <Typography variant=\"body2\" color=\"textSecondary\">\n                  {model.description}\n                </Typography>\n              </CardContent>\n              <CardActions>\n                <Button \n                  size=\"small\" \n                  onClick={() => handleModelClick(model.id)}\n                  disabled={!model.available}\n                  color={selectedModel === model.id ? \"primary\" : \"default\"}\n                  variant={selectedModel === model.id ? \"contained\" : \"outlined\"}\n                  fullWidth\n                >\n                  {selectedModel === model.id ? 'Selected' : 'Select'}\n                </Button>\n              </CardActions>\n            </Card>\n          </Grid>\n        ))}\n      </Grid>\n\n      <div className={classes.processButton}>\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          size=\"large\"\n          startIcon={<PlayArrowIcon />}\n          onClick={onProcess}\n          disabled={!selectedModel || !imageSelected || isProcessing}\n        >\n          {isProcessing ? 'Processing...' : 'Process Image'}\n        </Button>\n      </div>\n    </Box>\n  );\n};\n\nexport default ModelSelector;\n","import React, { useState } from 'react';\nimport { \n  Button, \n  Box, \n  Typography, \n  CircularProgress, \n  Snackbar,\n  Dialog,\n  DialogTitle,\n  DialogContent,\n  DialogActions,\n  TextField,\n  FormControl,\n  InputLabel,\n  Select,\n  MenuItem,\n  Grid,\n  Card,\n  CardMedia,\n  CardContent,\n  Chip\n} from '@material-ui/core';\nimport { Alert } from '@material-ui/lab';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  root: {\n    marginTop: theme.spacing(2),\n    marginBottom: theme.spacing(2),\n    padding: theme.spacing(2),\n    backgroundColor: '#f5f5f5',\n    borderRadius: theme.shape.borderRadius,\n  },\n  button: {\n    marginRight: theme.spacing(2),\n  },\n  searchDialog: {\n    minWidth: '500px',\n  },\n  formControl: {\n    marginBottom: theme.spacing(2),\n    minWidth: '100%',\n  },\n  searchResults: {\n    marginTop: theme.spacing(2),\n  },\n  resultCard: {\n    marginBottom: theme.spacing(2),\n  },\n  resultImage: {\n    height: 140,\n    objectFit: 'contain',\n  },\n  chip: {\n    margin: theme.spacing(0.5),\n  },\n  similarityChip: {\n    backgroundColor: theme.palette.primary.main,\n    color: 'white',\n  }\n}));\n\nconst VectorDBActions = ({ results }) => {\n  const classes = useStyles();\n  const [isSaving, setIsSaving] = useState(false);\n  const [saveSuccess, setSaveSuccess] = useState(false);\n  const [saveError, setSaveError] = useState(null);\n  const [openSearchDialog, setOpenSearchDialog] = useState(false);\n  const [searchType, setSearchType] = useState('image');\n  const [searchClass, setSearchClass] = useState('');\n  const [searchResults, setSearchResults] = useState([]);\n  const [isSearching, setIsSearching] = useState(false);\n  const [searchError, setSearchError] = useState(null);\n  \n  // Extract model and data from results\n  const { model, data } = results;\n  \n  // Handle saving to vector DB\n  const handleSaveToVectorDB = async () => {\n    setIsSaving(true);\n    setSaveError(null);\n    \n    try {\n      let response;\n      \n      if (model === 'vit') {\n        // For ViT, save the whole image with classifications\n        response = await fetch('/api/add-to-collection', {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          body: JSON.stringify({\n            image: data.image,\n            metadata: {\n              model: 'vit',\n              classifications: data.classifications\n            }\n          })\n        });\n      } else {\n        // For YOLO and DETR, save detected objects\n        response = await fetch('/api/add-detected-objects', {\n          method: 'POST',\n          headers: {\n            'Content-Type': 'application/json',\n          },\n          body: JSON.stringify({\n            image: data.image,\n            objects: data.detections,\n            imageId: generateUUID()\n          })\n        });\n      }\n      \n      if (!response.ok) {\n        throw new Error(`HTTP error! Status: ${response.status}`);\n      }\n      \n      const result = await response.json();\n      \n      if (result.error) {\n        throw new Error(result.error);\n      }\n      \n      setSaveSuccess(true);\n      setTimeout(() => setSaveSuccess(false), 5000);\n    } catch (err) {\n      console.error('Error saving to vector DB:', err);\n      setSaveError(`Error saving to vector DB: ${err.message}`);\n    } finally {\n      setIsSaving(false);\n    }\n  };\n  \n  // Handle opening search dialog\n  const handleOpenSearchDialog = () => {\n    setOpenSearchDialog(true);\n    setSearchResults([]);\n    setSearchError(null);\n  };\n  \n  // Handle closing search dialog\n  const handleCloseSearchDialog = () => {\n    setOpenSearchDialog(false);\n  };\n  \n  // Handle search type change\n  const handleSearchTypeChange = (event) => {\n    setSearchType(event.target.value);\n    setSearchResults([]);\n    setSearchError(null);\n  };\n  \n  // Handle search class change\n  const handleSearchClassChange = (event) => {\n    setSearchClass(event.target.value);\n  };\n  \n  // Handle search\n  const handleSearch = async () => {\n    setIsSearching(true);\n    setSearchError(null);\n    \n    try {\n      let requestBody = {};\n      \n      if (searchType === 'image') {\n        // Search by current image\n        requestBody = {\n          searchType: 'image',\n          image: data.image,\n          n_results: 5\n        };\n      } else {\n        // Search by class name\n        if (!searchClass.trim()) {\n          throw new Error('Please enter a class name');\n        }\n        \n        requestBody = {\n          searchType: 'class',\n          class_name: searchClass.trim(),\n          n_results: 5\n        };\n      }\n      \n      const response = await fetch('/api/search-similar-objects', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify(requestBody)\n      });\n      \n      if (!response.ok) {\n        throw new Error(`HTTP error! Status: ${response.status}`);\n      }\n      \n      const result = await response.json();\n      \n      if (result.error) {\n        throw new Error(result.error);\n      }\n      \n      console.log('Search API response:', result);\n      \n      // 백엔드는 {success, searchType, results} 구조로 응답하므로 results 배열만 추출\n      if (result.success && Array.isArray(result.results)) {\n        console.log('Setting search results array:', result.results);\n        console.log('Results array length:', result.results.length);\n        console.log('First result item:', result.results[0]);\n        setSearchResults(result.results);\n      } else {\n        console.error('Unexpected API response format:', result);\n        throw new Error('Unexpected API response format');\n      }\n    } catch (err) {\n      console.error('Error searching vector DB:', err);\n      setSearchError(`Error searching vector DB: ${err.message}`);\n    } finally {\n      setIsSearching(false);\n    }\n  };\n  \n  // Generate UUID for image ID\n  const generateUUID = () => {\n    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n      const r = Math.random() * 16 | 0;\n      const v = c === 'x' ? r : (r & 0x3 | 0x8);\n      return v.toString(16);\n    });\n  };\n  \n  // Render search results\n  const renderSearchResults = () => {\n    console.log('Rendering search results:', searchResults);\n    console.log('Search results length:', searchResults.length);\n    \n    if (searchResults.length === 0) {\n      console.log('No results to render');\n      return (\n        <Typography variant=\"body1\">No results found.</Typography>\n      );\n    }\n    \n    return (\n      <Grid container spacing={2}>\n        {searchResults.map((result, index) => {\n          const similarity = (1 - result.distance) * 100;\n          \n          return (\n            <Grid item xs={12} sm={6} key={index}>\n              <Card className={classes.resultCard}>\n                {result.metadata && result.metadata.image_data ? (\n                  <CardMedia\n                    className={classes.resultImage}\n                    component=\"img\"\n                    height=\"200\"\n                    image={`data:image/jpeg;base64,${result.metadata.image_data}`}\n                    alt={result.metadata && result.metadata.class ? result.metadata.class : 'Object'}\n                  />\n                ) : (\n                  <Box \n                    className={classes.resultImage}\n                    style={{ \n                      backgroundColor: '#f0f0f0', \n                      display: 'flex', \n                      alignItems: 'center', \n                      justifyContent: 'center',\n                      height: 200\n                    }}\n                  >\n                    <Typography variant=\"body2\" color=\"textSecondary\">\n                      {result.metadata && result.metadata.class ? result.metadata.class : 'Object'} Image\n                    </Typography>\n                  </Box>\n                )}\n                <CardContent>\n                  <Box display=\"flex\" justifyContent=\"space-between\" alignItems=\"center\" mb={1}>\n                    <Typography variant=\"subtitle1\">Result #{index + 1}</Typography>\n                    <Chip \n                      label={`Similarity: ${similarity.toFixed(2)}%`}\n                      className={classes.similarityChip}\n                      size=\"small\"\n                    />\n                  </Box>\n                  <Typography variant=\"body2\" color=\"textSecondary\">\n                    <strong>Class:</strong> {result.metadata.class || 'N/A'}\n                  </Typography>\n                  {result.metadata.confidence && (\n                    <Typography variant=\"body2\" color=\"textSecondary\">\n                      <strong>Confidence:</strong> {(result.metadata.confidence * 100).toFixed(2)}%\n                    </Typography>\n                  )}\n                  <Typography variant=\"body2\" color=\"textSecondary\">\n                    <strong>Object ID:</strong> {result.id}\n                  </Typography>\n                </CardContent>\n              </Card>\n            </Grid>\n          );\n        })}\n      </Grid>\n    );\n  };\n  \n  return (\n    <Box className={classes.root}>\n      <Typography variant=\"h6\" gutterBottom>\n        Vector Database Actions\n      </Typography>\n      \n      <Box display=\"flex\" alignItems=\"center\" mb={2}>\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={handleSaveToVectorDB}\n          disabled={isSaving}\n          className={classes.button}\n        >\n          {isSaving ? (\n            <>\n              <CircularProgress size={20} color=\"inherit\" style={{ marginRight: 8 }} />\n              Saving...\n            </>\n          ) : (\n            'Save to Vector DB'\n          )}\n        </Button>\n        \n        <Button\n          variant=\"outlined\"\n          color=\"primary\"\n          onClick={handleOpenSearchDialog}\n          className={classes.button}\n        >\n          Search Similar\n        </Button>\n      </Box>\n      \n      {saveError && (\n        <Alert severity=\"error\" style={{ marginTop: 8 }}>\n          {saveError}\n        </Alert>\n      )}\n      \n      <Snackbar open={saveSuccess} autoHideDuration={5000} onClose={() => setSaveSuccess(false)}>\n        <Alert severity=\"success\">\n          {model === 'vit' ? (\n            'Image and classifications successfully saved to vector DB!'\n          ) : (\n            'Detected objects successfully saved to vector DB!'\n          )}\n        </Alert>\n      </Snackbar>\n      \n      {/* Search Dialog */}\n      <Dialog\n        open={openSearchDialog}\n        onClose={handleCloseSearchDialog}\n        maxWidth=\"md\"\n        fullWidth\n      >\n        <DialogTitle>Search Vector Database</DialogTitle>\n        <DialogContent>\n          <FormControl className={classes.formControl}>\n            <InputLabel id=\"search-type-label\">Search Type</InputLabel>\n            <Select\n              labelId=\"search-type-label\"\n              id=\"search-type\"\n              value={searchType}\n              onChange={handleSearchTypeChange}\n            >\n              <MenuItem value=\"image\">Search by Current Image</MenuItem>\n              <MenuItem value=\"class\">Search by Class Name</MenuItem>\n            </Select>\n          </FormControl>\n          \n          {searchType === 'class' && (\n            <FormControl className={classes.formControl}>\n              <TextField\n                label=\"Class Name\"\n                value={searchClass}\n                onChange={handleSearchClassChange}\n                placeholder=\"e.g. person, car, dog...\"\n                fullWidth\n              />\n            </FormControl>\n          )}\n          \n          {searchError && (\n            <Alert severity=\"error\" style={{ marginBottom: 16 }}>\n              {searchError}\n            </Alert>\n          )}\n          \n          <Box className={classes.searchResults}>\n            {isSearching ? (\n              <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" p={4}>\n                <CircularProgress />\n                <Typography variant=\"body1\" style={{ marginLeft: 16 }}>\n                  Searching...\n                </Typography>\n              </Box>\n            ) : (\n              <>\n                {console.log('Search dialog render - searchResults:', searchResults)}\n                {searchResults.length > 0 ? renderSearchResults() : \n                  <Typography variant=\"body1\">No results found. Please try another search.</Typography>\n                }\n              </>\n            )}\n          </Box>\n        </DialogContent>\n        <DialogActions>\n          <Button onClick={handleCloseSearchDialog} color=\"default\">\n            Close\n          </Button>\n          <Button \n            onClick={handleSearch} \n            color=\"primary\" \n            variant=\"contained\"\n            disabled={isSearching || (searchType === 'class' && !searchClass.trim())}\n          >\n            Search\n          </Button>\n        </DialogActions>\n      </Dialog>\n    </Box>\n  );\n};\n\nexport default VectorDBActions;\n","import React from 'react';\nimport { \n  Paper, \n  Typography, \n  Box, \n  List, \n  ListItem, \n  ListItemText, \n  Divider,\n  Grid,\n  Chip\n} from '@material-ui/core';\nimport VectorDBActions from './VectorDBActions';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  paper: {\n    padding: theme.spacing(2)\n  },\n  marginBottom: {\n    marginBottom: theme.spacing(2)\n  },\n  resultImage: {\n    maxWidth: '100%',\n    maxHeight: '400px',\n    objectFit: 'contain'\n  },\n  dividerMargin: {\n    margin: `${theme.spacing(2)}px 0`\n  },\n  chipContainer: {\n    display: 'flex',\n    gap: theme.spacing(1),\n    flexWrap: 'wrap'\n  }\n}));\n\nconst ResultDisplay = ({ results }) => {\n  const classes = useStyles();\n  if (!results) return null;\n  \n  const { model, data } = results;\n  \n  // Helper to format times nicely\n  const formatTime = (ms) => {\n    if (ms === undefined || ms === null || isNaN(ms)) return '-';\n    const num = Number(ms);\n    if (num < 1000) return `${num.toFixed(2)} ms`;\n    return `${(num / 1000).toFixed(2)} s`;\n  };\n  \n  // Check if there's an error\n  if (data.error) {\n    return (\n      <Paper sx={{ p: 2, bgcolor: '#ffebee' }}>\n        <Typography color=\"error\">{data.error}</Typography>\n      </Paper>\n    );\n  }\n\n  // Display performance info\n  const renderPerformanceInfo = () => {\n    if (!data.performance) return null;\n    \n    return (\n      <Box className=\"performance-info\">\n        <Divider className={classes.dividerMargin} />\n        <Typography variant=\"body2\">\n          Inference time: {formatTime(data.performance.inference_time)} on {data.performance.device}\n        </Typography>\n      </Box>\n    );\n  };\n\n  // Render for YOLO and DETR (object detection)\n  if (model === 'yolo' || model === 'detr') {\n    return (\n      <Paper className={classes.paper}>\n        <Typography variant=\"h6\" gutterBottom>\n          {model === 'yolo' ? 'YOLOv8' : 'DETR'} Detection Results\n        </Typography>\n        \n        <Grid container spacing={3}>\n          <Grid item xs={12} md={6}>\n            {data.image && (\n              <Box className={classes.marginBottom}>\n                <Typography variant=\"subtitle1\" gutterBottom>\n                  Detection Result\n                </Typography>\n                <img \n                  src={`data:image/png;base64,${data.image}`} \n                  alt=\"Detection Result\" \n                  className={classes.resultImage}\n                />\n              </Box>\n            )}\n          </Grid>\n          \n          <Grid item xs={12} md={6}>\n            <Box className={classes.marginBottom}>\n              <Typography variant=\"subtitle1\" gutterBottom>\n                Detected Objects:\n              </Typography>\n              \n              {data.detections && data.detections.length > 0 ? (\n                <List>\n                  {data.detections.map((detection, index) => (\n                    <React.Fragment key={index}>\n                      <ListItem>\n                        <ListItemText \n                          primary={\n                            <Box style={{ display: 'flex', alignItems: 'center' }}>\n                              <Typography variant=\"body1\" component=\"span\">\n                                {detection.class}\n                              </Typography>\n                              <Chip \n                                label={`${(detection.confidence * 100).toFixed(0)}%`}\n                                size=\"small\"\n                                color=\"primary\"\n                                style={{ marginLeft: 8 }}\n                              />\n                            </Box>\n                          } \n                          secondary={`Bounding Box: [${detection.bbox.join(', ')}]`} \n                        />\n                      </ListItem>\n                      {index < data.detections.length - 1 && <Divider />}\n                    </React.Fragment>\n                  ))}\n                </List>\n              ) : (\n                <Typography variant=\"body1\">No objects detected</Typography>\n              )}\n            </Box>\n          </Grid>\n        </Grid>\n        \n        {renderPerformanceInfo()}\n        \n        {/* Vector DB Actions for Object Detection */}\n        <VectorDBActions results={results} />\n      </Paper>\n    );\n  }\n  \n  // Render for ViT (classification)\n  if (model === 'vit') {\n    return (\n      <Paper className={classes.paper}>\n        <Typography variant=\"h6\" gutterBottom>\n          ViT Classification Results\n        </Typography>\n        \n        <Typography variant=\"subtitle1\" gutterBottom>\n          Top Predictions:\n        </Typography>\n        \n        {data.top_predictions && data.top_predictions.length > 0 ? (\n          <List>\n            {data.top_predictions.map((prediction, index) => (\n              <React.Fragment key={index}>\n                <ListItem>\n                  <ListItemText \n                    primary={\n                      <Box style={{ display: 'flex', alignItems: 'center' }}>\n                        <Typography variant=\"body1\" component=\"span\">\n                          {prediction.rank}. {prediction.class}\n                        </Typography>\n                        <Chip \n                          label={`${(prediction.probability * 100).toFixed(1)}%`}\n                          size=\"small\"\n                          color={index === 0 ? \"primary\" : \"default\"}\n                          style={{ marginLeft: 8 }}\n                        />\n                      </Box>\n                    } \n                  />\n                </ListItem>\n                {index < data.top_predictions.length - 1 && <Divider />}\n              </React.Fragment>\n            ))}\n          </List>\n        ) : (\n          <Typography variant=\"body1\">No classifications available</Typography>\n        )}\n        \n        {renderPerformanceInfo()}\n        \n        {/* Vector DB Actions for ViT Classification */}\n        <VectorDBActions results={results} />\n      </Paper>\n    );\n  }\n  \n  return null;\n};\n\nexport default ResultDisplay;\n","import React, { useState } from 'react';\nimport { \n  Paper, \n  Typography, \n  Box, \n  TextField, \n  Button, \n  CircularProgress,\n  Divider\n} from '@material-ui/core';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n  paper: {\n    padding: theme.spacing(2),\n    marginTop: theme.spacing(2)\n  },\n  marginBottom: {\n    marginBottom: theme.spacing(2)\n  },\n  dividerMargin: {\n    margin: `${theme.spacing(2)}px 0`\n  },\n  responseBox: {\n    padding: theme.spacing(2),\n    backgroundColor: '#f5f5f5',\n    borderRadius: theme.shape.borderRadius,\n    marginTop: theme.spacing(2),\n    whiteSpace: 'pre-wrap'\n  },\n  buttonProgress: {\n    marginLeft: theme.spacing(1)\n  }\n}));\n\nconst LlmAnalysis = ({ visionResults, model }) => {\n  const classes = useStyles();\n  const [userQuery, setUserQuery] = useState('');\n  const [isAnalyzing, setIsAnalyzing] = useState(false);\n  const [analysisResult, setAnalysisResult] = useState(null);\n  const [error, setError] = useState(null);\n\n  // Format time for display\n  const formatTime = (ms) => {\n    if (ms === undefined || ms === null || isNaN(ms)) return '-';\n    const num = Number(ms);\n    if (num < 1000) return `${num.toFixed(2)} ms`;\n    return `${(num / 1000).toFixed(2)} s`;\n  };\n\n  const handleAnalyze = async () => {\n    if (!userQuery.trim()) return;\n    \n    setIsAnalyzing(true);\n    setError(null);\n    \n    try {\n      const response = await fetch('/api/analyze', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json',\n        },\n        body: JSON.stringify({\n          visionResults: visionResults,\n          userQuery: userQuery\n        }),\n      });\n\n      if (!response.ok) {\n        throw new Error(`HTTP error! Status: ${response.status}`);\n      }\n\n      const data = await response.json();\n      \n      if (data.error) {\n        setError(data.error);\n      } else {\n        setAnalysisResult(data);\n      }\n    } catch (err) {\n      console.error('Error analyzing with LLM:', err);\n      setError(`Error analyzing with LLM: ${err.message}`);\n    } finally {\n      setIsAnalyzing(false);\n    }\n  };\n\n  if (!visionResults) return null;\n\n  return (\n    <Paper className={classes.paper}>\n      <Typography variant=\"h6\" gutterBottom>\n        Ask AI about the {model === 'vit' ? 'Classification' : 'Detection'} Results\n      </Typography>\n      \n      <Typography variant=\"body2\" className={classes.marginBottom}>\n        Ask a question about the detected objects or classifications to get an AI-powered analysis.\n      </Typography>\n      \n      <TextField\n        fullWidth\n        label=\"Your question about the image\"\n        variant=\"outlined\"\n        value={userQuery}\n        onChange={(e) => setUserQuery(e.target.value)}\n        disabled={isAnalyzing}\n        className={classes.marginBottom}\n        placeholder={model === 'vit' \n          ? \"E.g., What category does this image belong to?\" \n          : \"E.g., How many people are in this image?\"}\n      />\n      \n      <Button \n        variant=\"contained\" \n        color=\"primary\"\n        onClick={handleAnalyze}\n        disabled={isAnalyzing || !userQuery.trim()}\n      >\n        Analyze with AI\n        {isAnalyzing && <CircularProgress size={24} className={classes.buttonProgress} />}\n      </Button>\n      \n      {error && (\n        <Box mt={2}>\n          <Typography color=\"error\">{error}</Typography>\n        </Box>\n      )}\n      \n      {analysisResult && (\n        <>\n          <Divider className={classes.dividerMargin} />\n          \n          <Typography variant=\"subtitle1\" gutterBottom>\n            AI Analysis:\n          </Typography>\n          \n          <Box className={classes.responseBox}>\n            <Typography variant=\"body1\">\n              {analysisResult.response}\n            </Typography>\n          </Box>\n          \n          {analysisResult.performance && (\n            <Box mt={1}>\n              <Typography variant=\"body2\" color=\"textSecondary\">\n                Analysis time: {formatTime(analysisResult.performance.inference_time)} on {analysisResult.performance.device}\n              </Typography>\n            </Box>\n          )}\n        </>\n      )}\n    </Paper>\n  );\n};\n\nexport default LlmAnalysis;\n","import React, { useState, useEffect } from 'react';\nimport { \n  Container, \n  Typography, \n  Box, \n  Paper, \n  Grid, \n  CircularProgress,\n  AppBar,\n  Toolbar,\n  ThemeProvider,\n  createMuiTheme\n} from '@material-ui/core';\nimport ImageUploader from './components/ImageUploader';\nimport ModelSelector from './components/ModelSelector';\nimport ResultDisplay from './components/ResultDisplay';\nimport LlmAnalysis from './components/LlmAnalysis';\nimport './App.css';\n\n// Create a theme\nconst theme = createMuiTheme({\n  palette: {\n    primary: {\n      main: '#3f51b5',\n    },\n    secondary: {\n      main: '#f50057',\n    },\n  },\n  typography: {\n    fontFamily: 'Roboto, Arial, sans-serif',\n  },\n});\n\nfunction App() {\n  const [selectedImage, setSelectedImage] = useState(null);\n  const [selectedModel, setSelectedModel] = useState('');\n  const [isProcessing, setIsProcessing] = useState(false);\n  const [results, setResults] = useState(null);\n  const [error, setError] = useState(null);\n  const [modelsStatus, setModelsStatus] = useState({\n    yolo: false,\n    detr: false,\n    vit: false\n  });\n\n  // Check API status on component mount\n  useEffect(() => {\n    fetch('/api/status')\n      .then(response => response.json())\n      .then(data => {\n        setModelsStatus(data.models);\n      })\n      .catch(err => {\n        console.error('Error checking API status:', err);\n        setError('Error connecting to the backend API. Please make sure the server is running.');\n      });\n  }, []);\n\n  const handleImageUpload = (image) => {\n    setSelectedImage(image);\n    setResults(null);\n    setError(null);\n  };\n\n  const handleModelSelect = (model) => {\n    setSelectedModel(model);\n    setResults(null);\n    setError(null);\n  };\n\n  const processImage = async () => {\n    if (!selectedImage || !selectedModel) {\n      setError('Please select both an image and a model');\n      return;\n    }\n\n    setIsProcessing(true);\n    setError(null);\n\n    // Create form data for the image\n    const formData = new FormData();\n    formData.append('image', selectedImage);\n\n    let endpoint = '';\n    switch (selectedModel) {\n      case 'yolo':\n        endpoint = '/api/detect/yolo';\n        break;\n      case 'detr':\n        endpoint = '/api/detect/detr';\n        break;\n      case 'vit':\n        endpoint = '/api/classify/vit';\n        break;\n      default:\n        setError('Invalid model selection');\n        setIsProcessing(false);\n        return;\n    }\n\n    try {\n      const response = await fetch(endpoint, {\n        method: 'POST',\n        body: formData,\n      });\n\n      if (!response.ok) {\n        throw new Error(`HTTP error! Status: ${response.status}`);\n      }\n\n      const data = await response.json();\n      setResults({ model: selectedModel, data });\n    } catch (err) {\n      console.error('Error processing image:', err);\n      setError(`Error processing image: ${err.message}`);\n    } finally {\n      setIsProcessing(false);\n    }\n  };\n\n  return (\n    <ThemeProvider theme={theme}>\n      <Box style={{ flexGrow: 1 }}>\n        <AppBar position=\"static\">\n          <Toolbar>\n            <Typography variant=\"h6\" style={{ flexGrow: 1 }}>\n              Multi-Model Object Detection Demo\n            </Typography>\n          </Toolbar>\n        </AppBar>\n        <Container maxWidth=\"lg\" style={{ marginTop: theme.spacing(4), marginBottom: theme.spacing(4) }}>\n          <Grid container spacing={3}>\n            <Grid item xs={12}>\n              <Paper style={{ padding: theme.spacing(2) }}>\n                <Typography variant=\"h5\" gutterBottom>\n                  Upload an image to see how each model performs!\n                </Typography>\n                <Typography variant=\"body1\" paragraph>\n                  This demo showcases three different object detection and image classification models:\n                </Typography>\n                <Typography variant=\"body1\" component=\"div\">\n                  <ul>\n                    <li><strong>YOLOv8</strong>: Fast and accurate object detection</li>\n                    <li><strong>DETR</strong>: DEtection TRansformer for object detection</li>\n                    <li><strong>ViT</strong>: Vision Transformer for image classification</li>\n                  </ul>\n                </Typography>\n              </Paper>\n            </Grid>\n            \n            <Grid item xs={12} md={6}>\n              <ImageUploader onImageUpload={handleImageUpload} />\n            </Grid>\n            \n            <Grid item xs={12} md={6}>\n              <ModelSelector \n                onModelSelect={handleModelSelect} \n                onProcess={processImage}\n                isProcessing={isProcessing}\n                modelsStatus={modelsStatus}\n                selectedModel={selectedModel}\n                imageSelected={!!selectedImage}\n              />\n            </Grid>\n            \n            {error && (\n              <Grid item xs={12}>\n                <Paper style={{ padding: theme.spacing(2), backgroundColor: '#ffebee' }}>\n                  <Typography color=\"error\">{error}</Typography>\n                </Paper>\n              </Grid>\n            )}\n            \n            {isProcessing && (\n              <Grid item xs={12} style={{ textAlign: 'center', margin: `${theme.spacing(4)}px 0` }}>\n                <CircularProgress />\n                <Typography variant=\"h6\" style={{ marginTop: theme.spacing(2) }}>\n                  Processing image...\n                </Typography>\n              </Grid>\n            )}\n            \n            {results && (\n              <>\n                <Grid item xs={12}>\n                  <ResultDisplay results={results} />\n                </Grid>\n                <Grid item xs={12}>\n                  <LlmAnalysis visionResults={results.data} model={results.model} />\n                </Grid>\n              </>\n            )}\n          </Grid>\n        </Container>\n      </Box>\n    </ThemeProvider>\n  );\n}\n\nexport default App;\n","const reportWebVitals = (onPerfEntry) => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}