Val Town Code SearchReturn to Val Town

3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5// Comprehensive type for wildlife image analysis
6type ImageAnalysisResult = {
7  // Identification Details
8  animalType?: string;
41
42function WildlifeRescueApp() {
43  const [image, setImage] = useState<string | null>(null);
44  const [location, setLocation] = useState<{ 
45    lat: number; 
50  } | null>(null);
51  const [locationError, setLocationError] = useState<string | null>(null);
52  const [imageAnalysis, setImageAnalysis] = useState<ImageAnalysisResult | null>(null);
53  const [editableAnalysis, setEditableAnalysis] = useState<ImageAnalysisResult | null>(null);
54  const [isAnalyzing, setIsAnalyzing] = useState(false);
55  const [uploadError, setUploadError] = useState<string | null>(null);
68
69  // Comprehensive AI analysis method
70  const analyzeImage = useCallback(async (imageDataUrl: string) => {
71    setIsAnalyzing(true);
72    try {
110              },
111              { 
112                type: "image_url", 
113                image_url: { url: imageDataUrl } 
114              }
115            ],
119      });
120
121      const analysisText = response.choices[0].message.content || "Unable to analyze image";
122      
123      // Comprehensive parsing of analysis
124      const analysis: ImageAnalysisResult = {
125        // Identification Details
126        animalType: extractDetail(analysisText, ['animal species', 'species']),
167              },
168              { 
169                type: "image_url", 
170                image_url: { url: imageDataUrl } 
171              }
172            ],
178      analysis.narrativeDescription = narrativeResponse.choices[0].message.content || "Unable to generate narrative";
179
180      setImageAnalysis(analysis);
181      setEditableAnalysis({...analysis});
182      setUploadError(null);
187        recommendedAction: "Urgent professional wildlife rescue consultation required"
188      };
189      setImageAnalysis(fallbackAnalysis);
190      setEditableAnalysis(fallbackAnalysis);
191      setUploadError("Failed to analyze the image. Please try again.");
192    } finally {
193      setIsAnalyzing(false);
196
197  // Severity determination remains the same
198  const determineSeverityLevel = (analysisText: string): ImageAnalysisResult['severityLevel'] => {
199    const lowRiskKeywords = ['minor', 'slight', 'small'];
200    const criticalRiskKeywords = ['critical', 'severe', 'urgent', 'emergency'];
206  };
207
208  // Enhanced image upload handler with file validation
209  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
210    const file = event.target.files?.[0];
211    if (file) {
212      // Validate file type
213      const validImageTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
214      if (!validImageTypes.includes(file.type)) {
215        setUploadError('Please upload a valid image file (JPEG, PNG, GIF, or WebP)');
216        return;
217      }
220      const maxSizeInBytes = 10 * 1024 * 1024; // 10MB
221      if (file.size > maxSizeInBytes) {
222        setUploadError('Image file is too large. Please upload an image under 10MB.');
223        return;
224      }
226      const reader = new FileReader();
227      reader.onloadend = async () => {
228        const imageDataUrl = reader.result as string;
229        setImage(imageDataUrl);
230        await analyzeImage(imageDataUrl);
231      };
232      reader.readAsDataURL(file);
235
236  // Handle editable field changes
237  const handleAnalysisChange = (field: keyof ImageAnalysisResult, value: any) => {
238    if (editableAnalysis) {
239      setEditableAnalysis({
265          <input 
266            type="file" 
267            accept="image/*" 
268            onChange={handleImageUpload}
269            ref={fileInputRef}
270            style={{ display: 'none' }}
280            }}
281          >
282            Upload Wildlife Image
283          </button>
284        </div>
296        )}
297
298        {image && editableAnalysis && (
299          <div>
300            <img 
301              src={image} 
302              alt="Uploaded wildlife" 
303              style={{ maxWidth: '300px', margin: '10px 0' }} 

4
5function WildlifeRescueApp() {
6  const [image, setImage] = useState<{ file: File | null, preview: string }>({ file: null, preview: '' });
7  const [location, setLocation] = useState<{ lat: number; lng: number }>({ lat: 0, lng: 0 });
8  const [animalType, setAnimalType] = useState<string>('');
12
13  const resetForm = useCallback(() => {
14    setImage({ file: null, preview: '' });
15    setAnimalType('');
16    setInjuryDescription('');
22  }, []);
23
24  const handleImageUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
25    const file = e.target.files?.[0];
26    if (file) {
31      }
32
33      const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
34      if (!validTypes.includes(file.type)) {
35        setSubmitStatus('Invalid file type. Please upload JPEG, PNG, or GIF.');
39      const reader = new FileReader();
40      reader.onloadend = () => {
41        setImage({
42          file,
43          preview: reader.result as string
81    try {
82      // Input validation
83      if (!image.file) {
84        throw new Error('Please upload a wildlife image');
85      }
86      if (!animalType?.trim()) {
96        injuryDescription,
97        location,
98        imagePreview: image.preview
99      });
100
125        <div style={{ marginBottom: '15px' }}>
126          <label style={{ display: 'block', marginBottom: '5px' }}>
127            Upload Wildlife Image:
128            <input 
129              ref={fileInputRef}
130              type="file" 
131              accept="image/jpeg,image/png,image/gif" 
132              onChange={handleImageUpload} 
133              required 
134              style={{ width: '100%', padding: '10px', backgroundColor: 'white' }}
135            />
136          </label>
137          {image.preview && (
138            <img 
139              src={image.preview} 
140              alt="Uploaded wildlife" 
141              style={{ 

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering. 

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
694  const { ValTown } = await import("npm:@valtown/sdk");
695  const vt = new ValTown();
696  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
697  // const authorEmail = me.email;
698
762
763  c.set("email", email);
764  c.set("profile", { profileImageUrl, username });
765  await next();
766};

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

26    title: "Markdown Editor",
27    code:
28      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
29    performance: {
30      tokensPerSecond: 4092.96,

1165        <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

43    const track = data.recenttracks?.track?.[0];
44    if (track) {
45      // Extract the largest available image (usually the last in the array)
46      const coverArtUrl = track.image?.[track.image.length - 1]?.["#text"] || null;
47
48      const trackInfo = {