/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Comprehensive type for wildlife image analysis type ImageAnalysisResult = { // Identification Details animalType?: string; scientificName?: string; estimatedAge?: string; gender?: string; // Injury and Health Details injuryLocation?: string; injuryType?: string; injurySeverity?: string; visibleSymptoms?: string[]; potentialComplications?: string[]; // Environmental and Contextual Information habitat?: string; environmentalContext?: string; immediateEnvironment?: string; potentialThreats?: string[]; // Rescue and Care Recommendations severityLevel?: 'Low' | 'Moderate' | 'Critical'; recommendedAction?: string; emergencyCareTips?: string[]; veterinarySpecialistNeeded?: boolean; // Descriptive Narratives generalDescription?: string; narrativeDescription?: string; emotionalStateDescription?: string; // Additional Diagnostic Information possibleUnderlyingConditions?: string[]; urgencyLevel?: number; // 1-10 scale }; function WildlifeRescueApp() { const [image, setImage] = useState(null); const [location, setLocation] = useState<{ lat: number; lng: number; description?: string; accuracy?: number; altitude?: number; } | null>(null); const [locationError, setLocationError] = useState(null); const [imageAnalysis, setImageAnalysis] = useState(null); const [editableAnalysis, setEditableAnalysis] = useState(null); const [isAnalyzing, setIsAnalyzing] = useState(false); const [uploadError, setUploadError] = useState(null); const fileInputRef = useRef(null); // Advanced detail extraction with multiple matching strategies const extractDetail = (text: string, keys: string[], fallback: string = "Not specified"): string => { const lowercaseText = text.toLowerCase(); for (const key of keys) { const regex = new RegExp(`${key}:?\\s*(.+?)(?:\n|$)`, 'i'); const match = text.match(regex); if (match) return match[1].trim(); } return fallback; }; // Comprehensive AI analysis method const analyzeImage = useCallback(async (imageDataUrl: string) => { setIsAnalyzing(true); try { // Dynamically import OpenAI to ensure server-side compatibility const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); // Detailed AI prompt for comprehensive analysis const response = await openai.chat.completions.create({ model: "gpt-4o", messages: [ { role: "user", content: [ { type: "text", text: "Provide an EXTREMELY comprehensive wildlife incident forensic report:" + "\n🔍 IDENTIFICATION" + "\n- Precise animal species (common & scientific name)" + "\n- Estimated age and gender" + "\n- Physical characteristics" + "\n\n🩺 MEDICAL ASSESSMENT" + "\n- Exact injury location & type" + "\n- Injury severity classification" + "\n- Visible symptoms" + "\n- Potential medical complications" + "\n\n🌍 ENVIRONMENTAL CONTEXT" + "\n- Specific habitat type" + "\n- Immediate environmental conditions" + "\n- Potential ecological threats" + "\n\n🚨 RESCUE PROTOCOL" + "\n- Recommended immediate actions" + "\n- Emergency care instructions" + "\n- Specialist intervention needed" + "\n- Urgency level (1-10)" + "\n\nProvide a compassionate, scientifically precise narrative." }, { type: "image_url", image_url: { url: imageDataUrl } } ], } ], max_tokens: 800 }); const analysisText = response.choices[0].message.content || "Unable to analyze image"; // Comprehensive parsing of analysis const analysis: ImageAnalysisResult = { // Identification Details animalType: extractDetail(analysisText, ['animal species', 'species']), scientificName: extractDetail(analysisText, ['scientific name']), estimatedAge: extractDetail(analysisText, ['estimated age', 'age']), gender: extractDetail(analysisText, ['gender']), // Injury Details injuryLocation: extractDetail(analysisText, ['injury location']), injuryType: extractDetail(analysisText, ['injury type']), injurySeverity: extractDetail(analysisText, ['injury severity']), visibleSymptoms: analysisText.match(/Visible symptoms:?\s*(.+?)(?:\n|$)/i)?.[1].split(',').map(s => s.trim()) || [], // Environmental Context habitat: extractDetail(analysisText, ['habitat type', 'habitat']), environmentalContext: extractDetail(analysisText, ['environmental conditions']), potentialThreats: analysisText.match(/Potential ecological threats:?\s*(.+?)(?:\n|$)/i)?.[1].split(',').map(s => s.trim()) || [], // Rescue Recommendations severityLevel: determineSeverityLevel(analysisText), recommendedAction: extractDetail(analysisText, ['recommended actions']) || "Urgent professional wildlife rescue consultation required", emergencyCareTips: analysisText.match(/Emergency care instructions:?\s*(.+?)(?:\n|$)/i)?.[1].split(',').map(s => s.trim()) || [], veterinarySpecialistNeeded: /specialist intervention needed/i.test(analysisText), // Descriptive Elements generalDescription: analysisText, urgencyLevel: parseInt(extractDetail(analysisText, ['urgency level']) || '5') }; // Generate narrative description const narrativeResponse = await openai.chat.completions.create({ model: "gpt-4o", messages: [ { role: "user", content: [ { type: "text", text: "Create a deeply compassionate narrative about this wildlife incident:" + "\n- Emotional state of the animal" + "\n- Potential life story and challenges" + "\n- Hopeful perspective on recovery" + "\n\nBase Analysis:\n" + analysisText }, { type: "image_url", image_url: { url: imageDataUrl } } ], } ], max_tokens: 600 }); analysis.narrativeDescription = narrativeResponse.choices[0].message.content || "Unable to generate narrative"; setImageAnalysis(analysis); setEditableAnalysis({...analysis}); setUploadError(null); } catch (error) { console.error("Comprehensive analysis error:", error); const fallbackAnalysis = { severityLevel: 'Low', recommendedAction: "Urgent professional wildlife rescue consultation required" }; setImageAnalysis(fallbackAnalysis); setEditableAnalysis(fallbackAnalysis); setUploadError("Failed to analyze the image. Please try again."); } finally { setIsAnalyzing(false); } }, []); // Severity determination remains the same const determineSeverityLevel = (analysisText: string): ImageAnalysisResult['severityLevel'] => { const lowRiskKeywords = ['minor', 'slight', 'small']; const criticalRiskKeywords = ['critical', 'severe', 'urgent', 'emergency']; const text = analysisText.toLowerCase(); if (criticalRiskKeywords.some(keyword => text.includes(keyword))) return 'Critical'; if (lowRiskKeywords.some(keyword => text.includes(keyword))) return 'Low'; return 'Moderate'; }; // Enhanced image upload handler with file validation const handleImageUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file) { // Validate file type const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']; if (!validImageTypes.includes(file.type)) { setUploadError('Please upload a valid image file (JPEG, PNG, GIF, or WebP)'); return; } // Validate file size (e.g., max 10MB) const maxSizeInBytes = 10 * 1024 * 1024; // 10MB if (file.size > maxSizeInBytes) { setUploadError('Image file is too large. Please upload an image under 10MB.'); return; } const reader = new FileReader(); reader.onloadend = async () => { const imageDataUrl = reader.result as string; setImage(imageDataUrl); await analyzeImage(imageDataUrl); }; reader.readAsDataURL(file); } }; // Handle editable field changes const handleAnalysisChange = (field: keyof ImageAnalysisResult, value: any) => { if (editableAnalysis) { setEditableAnalysis({ ...editableAnalysis, [field]: value }); } }; return (

Wildlife See-Me: Rescue App

Wildlife Incident Report

{uploadError && (

{uploadError}

)} {image && editableAnalysis && (

Comprehensive Wildlife Analysis

Identification Details

Species: handleAnalysisChange('animalType', e.target.value)} style={inputStyle} />

Scientific Name: handleAnalysisChange('scientificName', e.target.value)} style={inputStyle} />

Estimated Age: handleAnalysisChange('estimatedAge', e.target.value)} style={inputStyle} />

Gender: handleAnalysisChange('gender', e.target.value)} style={inputStyle} />

Medical Assessment

Injury Location: handleAnalysisChange('injuryLocation', e.target.value)} style={inputStyle} />

Injury Type: handleAnalysisChange('injuryType', e.target.value)} style={inputStyle} />

Severity: handleAnalysisChange('injurySeverity', e.target.value)} style={inputStyle} />

Visible Symptoms: handleAnalysisChange('visibleSymptoms', e.target.value.split(',').map(s => s.trim()))} style={inputStyle} />

Rescue Recommendations

Severity Level:

Recommended Action: handleAnalysisChange('recommendedAction', e.target.value)} style={inputStyle} />

Emergency Care Tips: handleAnalysisChange('emergencyCareTips', e.target.value.split(',').map(s => s.trim()))} style={inputStyle} />

Compassionate Narrative

handleAnalysisChange('narrativeDescription', e.target.value)}
                  style={{
                    width: '100%',
                    minHeight: '150px',
                    padding: '10px',
                    borderRadius: '5px',
                    border: '1px solid #ccc'
                  }}
                />
              </div>
            </div>
          </div>
        )}
      </div>
      
      <footer style={{ 
        marginTop: '20px', 
        textAlign: 'center', 
        color: '#2F4F4F' 
      }}>
        <a 
          href={import.meta.url.replace("esm.town", "val.town")} 
          target="_top" 
          style={{ color: '#8B4513' }}
        >
          View Source
        </a>
      </footer>
    </div>
  );
}

// Styling for input containers
const inputContainerStyle = {
  display: 'flex',
  flexDirection: 'column' as const,
  marginBottom: '10px'
};

const inputStyle = {
  padding: '8px',
  borderRadius: '5px',
  border: '1px solid #ccc',
  width: '100%'
};

function client() {
  createRoot(document.getElementById("root")).render(<WildlifeRescueApp />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  return new Response(`
    <html>
      <head>
        <title>Wildlife See-Me: Rescue App</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "content-type": "text/html" }
  });
}</article></body></html>

flowingBeigePigeon

Version 4