Val Town Code SearchReturn to Val Town

24
25### Análisis de Imágenes
26- `POST /api/analysis` - Analizar una imagen para detectar plagas/enfermedades
27
28### Usuarios

509                    </div>
510                    
511                    {record.imageUrl && (
512                      <div className="mt-3">
513                        <img 
514                          src={record.imageUrl} 
515                          alt="Imagen de la plaga/enfermedad" 
516                          className="h-24 object-cover rounded-md"
517                        />
541                  onClick={() => setActiveTab("analyze")}
542                >
543                  Analizar una imagen
544                </button>
545              </div>

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { ImageAnalysisResponse, PestDisease, User } from "../../shared/types.ts";
4
5interface AnalysisResultProps {
6  result: ImageAnalysisResponse;
7  pestDiseases: PestDisease[];
8  user: User | null;

2import React, { useState, useRef } from "https://esm.sh/react@18.2.0";
3
4interface ImageUploaderProps {
5  onImageUpload: (imageData: string) => void;
6  isLoading: boolean;
7  cropType: string;
9}
10
11const ImageUploader: React.FC<ImageUploaderProps> = ({ 
12  onImageUpload, 
13  isLoading,
14  cropType,
40    
41    if (file) {
42      // Check if the file is an image
43      if (!file.type.startsWith("image/")) {
44        alert("Por favor selecciona un archivo de imagen válido.");
45        return;
46      }
48      // Check file size (max 5MB)
49      if (file.size > 5 * 1024 * 1024) {
50        alert("La imagen es demasiado grande. Por favor selecciona una imagen de menos de 5MB.");
51        return;
52      }
56      setPreviewUrl(objectUrl);
57      
58      // Convert the image to base64
59      const reader = new FileReader();
60      reader.onload = (e) => {
61        const base64 = e.target?.result as string;
62        // We'll use this base64 string when submitting the image for analysis
63      };
64      reader.readAsDataURL(file);
66  };
67  
68  // Handle image upload button click
69  const handleUploadClick = () => {
70    if (fileInputRef.current) {
76  const handleAnalyzeClick = () => {
77    if (previewUrl) {
78      // Convert the preview image to base64
79      const img = new Image();
80      img.crossOrigin = "Anonymous";
81      img.onload = () => {
86        const ctx = canvas.getContext("2d");
87        if (ctx) {
88          ctx.drawImage(img, 0, 0);
89          const base64 = canvas.toDataURL("image/jpeg");
90          onImageUpload(base64);
91        }
92      };
97  return (
98    <div className="bg-white p-6 rounded-lg shadow-md">
99      <h2 className="text-xl font-semibold mb-4">Analizar Imagen de Cultivo</h2>
100      
101      <div className="mb-4">
123              src={previewUrl} 
124              alt="Vista previa" 
125              className="mx-auto image-preview rounded-lg"
126            />
127            <button
129              onClick={handleUploadClick}
130            >
131              Cambiar imagen
132            </button>
133          </div>
136            <div className="text-6xl text-gray-300 mx-auto">📷</div>
137            <p className="text-gray-500">
138              Haz clic para seleccionar una imagen o arrastra y suelta aquí
139            </p>
140            <button
142              onClick={handleUploadClick}
143            >
144              Seleccionar Imagen
145            </button>
146          </div>
151          ref={fileInputRef}
152          onChange={handleFileChange}
153          accept="image/*"
154          className="hidden"
155        />
168            </div>
169          ) : (
170            "Analizar Imagen"
171          )}
172        </button>
188};
189
190export default ImageUploader;

38              onClick={() => onTabChange("analyze")}
39            >
40              Analizar Imagen
41            </button>
42          </li>

2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import Header from "./Header.tsx";
4import ImageUploader from "./ImageUploader.tsx";
5import AnalysisResult from "./AnalysisResult.tsx";
6import PestDiseaseLibrary from "./PestDiseaseLibrary.tsx";
7import UserDashboard from "./UserDashboard.tsx";
8import { ImageAnalysisResponse, PestDisease, User } from "../../shared/types.ts";
9
10// Define the tabs for the application
16  
17  // State for the analysis result
18  const [analysisResult, setAnalysisResult] = useState<ImageAnalysisResponse | null>(null);
19  
20  // State for loading status
53  }, []);
54  
55  // Handle image analysis
56  const handleAnalyzeImage = async (imageData: string) => {
57    setIsLoading(true);
58    setError(null);
65        },
66        body: JSON.stringify({
67          imageData,
68          cropType: cropType || undefined
69        })
75        setAnalysisResult(data.data);
76      } else {
77        setError(data.error || "Error analyzing image");
78        setAnalysisResult(null);
79      }
80    } catch (error) {
81      console.error("Error analyzing image:", error);
82      setError("Error connecting to the server. Please try again.");
83      setAnalysisResult(null);
135        return (
136          <div className="fade-in">
137            <ImageUploader 
138              onImageUpload={handleAnalyzeImage} 
139              isLoading={isLoading} 
140              cropType={cropType}

13  
14  <!-- Favicon -->
15  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌱</text></svg>">
16  
17  <!-- Custom styles -->
31    }
32    
33    .image-preview {
34      max-height: 300px;
35      object-fit: contain;

1import { Hono } from "https://esm.sh/hono@3.11.7";
2import { analyzeImage } from "../services/aiService.ts";
3import { 
4  createPestDiseaseRecord, 
6} from "../database/queries.ts";
7import { blob } from "https://esm.town/v/std/blob";
8import type { ApiResponse, ImageAnalysisResponse } from "../../shared/types.ts";
9
10const app = new Hono();
11
12// Analyze an image for pests/diseases
13app.post("/", async (c) => {
14  try {
16    
17    // Validate request
18    if (!body.imageData && !body.imageUrl) {
19      const response: ApiResponse<null> = {
20        success: false,
21        error: "Either imageData or imageUrl is required"
22      };
23      return c.json(response, 400);
24    }
25
26    let imageUrl = body.imageUrl;
27    
28    // If base64 image data is provided, store it in blob storage
29    if (body.imageData) {
30      // Generate a unique key for the image
31      const timestamp = Date.now();
32      const randomString = Math.random().toString(36).substring(2, 10);
33      const imageKey = `crop_image_${timestamp}_${randomString}`;
34      
35      // Store the image in blob storage
36      await blob.set(imageKey, body.imageData, { contentType: "image/jpeg" });
37      
38      // Get the URL for the stored image
39      imageUrl = await blob.getUrl(imageKey);
40    }
41
42    // Analyze the image
43    const analysisResult = await analyzeImage(imageUrl, body.cropType);
44    
45    // If a crop record ID is provided, save the analysis result
57          cropRecordId,
58          body.severity || "medium",
59          imageUrl,
60          analysisResult.diagnosis,
61          pestDiseaseId,
65    }
66
67    const response: ApiResponse<ImageAnalysisResponse> = {
68      success: true,
69      data: analysisResult
71    return c.json(response);
72  } catch (error) {
73    console.error("Error analyzing image:", error);
74    const response: ApiResponse<null> = {
75      success: false,

1import type { ImageAnalysisResponse } from "../../shared/types.ts";
2import { getPestDiseases, getTreatmentsByPestDiseaseId } from "../database/queries.ts";
3
22}
23
24export async function analyzeImage(
25  imageUrl: string, 
26  cropType?: string
27): Promise<ImageAnalysisResponse> {
28  try {
29    // Get the API key from environment variables
34
35    // Construct the prompt for the AI
36    let prompt = "Analyze this image of a plant and identify any pests or diseases. ";
37    prompt += "Describe what you see, including any visible symptoms, damage patterns, or signs of infestation. ";
38    
61              },
62              {
63                type: "image_url",
64                image_url: {
65                  url: imageUrl
66                }
67              }
114      recommendedTreatments,
115      additionalNotes: possibleIssues.length === 0 
116        ? "No specific pest or disease was confidently identified. Consider uploading a clearer image or consulting with an agricultural expert."
117        : undefined
118    };
119  } catch (error) {
120    console.error("Error analyzing image:", error);
121    throw error;
122  }

21    affectedCrops: JSON.parse(row.affected_crops),
22    preventionMethods: JSON.parse(row.prevention_methods),
23    imageUrls: row.image_urls ? JSON.parse(row.image_urls) : undefined,
24    treatments: [] // Will be populated separately
25  }));
47    affectedCrops: JSON.parse(row.affected_crops),
48    preventionMethods: JSON.parse(row.prevention_methods),
49    imageUrls: row.image_urls ? JSON.parse(row.image_urls) : undefined,
50    treatments
51  };
69      affectedCrops: JSON.parse(row.affected_crops),
70      preventionMethods: JSON.parse(row.prevention_methods),
71      imageUrls: row.image_urls ? JSON.parse(row.image_urls) : undefined,
72      treatments
73    };
199  cropRecordId: number,
200  severity: 'low' | 'medium' | 'high',
201  imageUrl?: string,
202  aiDiagnosis?: string,
203  pestDiseaseId?: number,
206  const result = await sqlite.execute(
207    `INSERT INTO ${TABLES.PEST_DISEASE_RECORDS} 
208     (crop_record_id, pest_disease_id, severity, status, image_url, ai_diagnosis, notes)
209     VALUES (?, ?, ?, 'active', ?, ?, ?)`,
210    [cropRecordId, pestDiseaseId, severity, imageUrl, aiDiagnosis, notes]
211  );
212  return result.lastInsertId;
291    status: row.status as 'active' | 'treating' | 'resolved',
292    notes: row.notes,
293    imageUrl: row.image_url,
294    aiDiagnosis: row.ai_diagnosis,
295    treatmentApplied: row.treatment_applied,
319    status: row.status as 'active' | 'treating' | 'resolved',
320    notes: row.notes,
321    imageUrl: row.image_url,
322    aiDiagnosis: row.ai_diagnosis,
323    treatmentApplied: row.treatment_applied,