Val Town Code SearchReturn to Val Town

4
5function LandingPage() {
6  const [imageUrl] = useState(`https://maxm-imggenurl.web.val.run/young-girl-tech-entrepreneur-cartoon-style-holding-smartphone-and-gadgets`);
7
8  // Replace this with the actual URL of your voicemail val
35      }}>
36        <img 
37          src={imageUrl} 
38          alt="Girl with Tech Gadgets" 
39          style={{

10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>

52          "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" version=\"1.1\" ",
53        ),
54        { headers: { "Content-Type": "image/svg+xml" } },
55      )
56      : new Response(

2
3
4![image.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/aa865299-573f-4359-497a-9e0f7af6dc00/public)
5
6Use an import map to make sure your Val frontend and backend are always using the exact same versions. 
22You can see that the `"https://esm.sh/react"` import imports the version directly without any redirects. Saving on network hops and also ensuring version stability!
23
24<p><img width=400 src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/38d61d0a-0dee-42de-dd44-b4ce9bd57000/public" /></p>
25
26

13
14let TIME_LIMIT = 10;
15let CHALLENGE_IMAGES: Challenge[] = [];
16
17const capitalize = (str: string) => {
23    switch (category) {
24      case "bicycle":
25        CHALLENGE_IMAGES.push({
26          src: `https://dapper-halva-6db681.netlify.app/Bicycle/Bicycle%20(${i + 1}).png`,
27          category,
30
31      case "palm":
32        CHALLENGE_IMAGES.push({
33          src: `https://dapper-halva-6db681.netlify.app/Palm/Palm%20(${i + 1}).png`,
34          category,
37
38      case "hydrant":
39        CHALLENGE_IMAGES.push({
40          src: `https://dapper-halva-6db681.netlify.app/Hydrant/Hydrant%20(${i + 1}).png`,
41          category,
44
45      case "crosswalk":
46        CHALLENGE_IMAGES.push({
47          src: `https://dapper-halva-6db681.netlify.app/Crosswalk/Cross%20(${i + 1}).png`,
48          category,
73function App() {
74  const [challenge, setChallenge] = useState(generateChallenge());
75  const [selectedImages, setSelectedImages] = useState<number[]>([]);
76  const [score, setScore] = useState(0);
77  const [timeLeft, setTimeLeft] = useState(TIME_LIMIT);
98    const targetCategory = randomCategory();
99    return {
100      prompt: `Select all images with ${targetCategory}s`,
101      category: targetCategory,
102    };
103  }
104
105  function handleImageClick(index: number) {
106    if (gameState !== "playing") return;
107
108    setSelectedImages(prev =>
109      prev.includes(index)
110        ? prev.filter(i => i !== index)
116    if (gameState !== "playing") return;
117
118    const correctSelections = CHALLENGE_IMAGES.slice(0, 9)
119      .map((img, index) => img.category === challenge.category ? index : -1)
120      .filter(i => i !== -1);
121
122    const isCorrect = correctSelections.every(ci => selectedImages.includes(ci))
123      && selectedImages.every(si => correctSelections.includes(si));
124
125    if (isCorrect) {
126      setScore(prev => prev + 10);
127      shuffle(CHALLENGE_IMAGES);
128      setChallenge(generateChallenge());
129      setSelectedImages([]);
130      setTimeLeft(Math.max(10, TIME_LIMIT - Math.floor(score / 50)));
131    } else {
160    setTimeLeft(TIME_LIMIT);
161    setGameState("playing");
162    shuffle(CHALLENGE_IMAGES);
163    setChallenge(generateChallenge());
164    setSelectedImages([]);
165    setSubmissionResult({});
166  }
299          </div>
300          <div className="grid grid-cols-3 gap-5 lg:pl-6">
301            {CHALLENGE_IMAGES.slice(0, 9).map((img, index) => (
302              <img
303                key={index}
304                onClick={() => handleImageClick(index)}
305                className={`
306              text-6xl 
312              duration-200 
313              ${
314                  selectedImages.includes(index)
315                    ? "border-green-500 bg-green-100"
316                    : "border-gray-300 bg-white hover:bg-gray-50"

148
149function App() {
150  const [image, setImage] = useState<File | null>(null);
151  const [analysis, setAnalysis] = useState<string | null>(null);
152  const [isLoading, setIsLoading] = useState(false);
159  const fileInputRef = useRef<HTMLInputElement>(null);
160
161  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
162    const file = e.target.files?.[0];
163    if (file) {
166      setAnalysis(null);
167
168      // Validate image
169      const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
170      const maxSize = 5 * 1024 * 1024; // 5MB
171
172      if (!allowedTypes.includes(file.type)) {
173        setErrorMessage('Invalid image format. Please upload a valid image.');
174        return;
175      }
176
177      if (file.size > maxSize) {
178        setErrorMessage('Image is too large. Maximum file size is 5MB.');
179        return;
180      }
181
182      setImage(file);
183    }
184  };
210      
211      // Draw current video frame to canvas
212      context?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
213      
214      // Convert canvas to file
215      canvasRef.current.toBlob((blob) => {
216        if (blob) {
217          const file = new File([blob], 'captured-image.jpg', { type: 'image/jpeg' });
218          
219          // Reset previous states
221          setAnalysis(null);
222
223          setImage(file);
224          setCameraActive(false);
225          
230          video.srcObject = null;
231        }
232      }, 'image/jpeg');
233    }
234  };
235
236  const processImage = async () => {
237    if (!image) {
238      setErrorMessage('No image uploaded. Please select an image or take a photo.');
239      return;
240    }
245
246    const formData = new FormData();
247    formData.append('image', image);
248    formData.append('language', selectedLanguage);
249
341        ref={fileInputRef}
342        type="file" 
343        accept="image/jpeg,image/png,image/webp" 
344        onChange={handleImageUpload}
345        style={{ marginBottom: '10px', marginRight: '10px' }}
346      />
403      {/* Analyze Button */}
404      <button 
405        onClick={processImage} 
406        disabled={!image || isLoading}
407        style={{
408          backgroundColor: image ? '#4CAF50' : '#cccccc',
409          color: 'white',
410          padding: '10px 15px',
411          border: 'none',
412          borderRadius: '5px',
413          cursor: image ? 'pointer' : 'not-allowed',
414          display: 'block',
415          marginTop: '10px'
485    try {
486      const formData = await request.formData();
487      const imageFile = formData.get('image') as File;
488      const language = formData.get('language') as string || 'en';
489      
490      if (!imageFile) {
491        return new Response('No image uploaded', { status: 400 });
492      }
493
494      // Additional server-side validation
495      const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
496      const maxSize = 5 * 1024 * 1024; // 5MB
497
498      if (!allowedTypes.includes(imageFile.type)) {
499        return new Response('Invalid image type', { status: 400 });
500      }
501
502      if (imageFile.size > maxSize) {
503        return new Response('Image too large', { status: 400 });
504      }
505
508      const timeoutId = setTimeout(() => controller.abort(), 25000); // 25 seconds timeout
509
510      const imageBytes = await imageFile.arrayBuffer();
511      const base64Image = btoa(
512        String.fromCharCode(...new Uint8Array(imageBytes))
513      );
514
521              content: `You are a medical expert analyzing a medicine label. 
522              STRICT REQUIREMENTS:
523              1. If no text is clearly visible, respond with a clear message about image quality.
524              2. Provide a COMPREHENSIVE medical analysis in the specified language: ${language}
525              3. Language-Specific Instruction: ${LANGUAGE_INSTRUCTIONS[language]}
536              - Entire response MUST be in the target language with NO English mixing
537              - Use professional, clear medical terminology
538              - If image is unreadable, explain why in the target language`
539            },
540            {
546                },
547                {
548                  type: "image_url", 
549                  image_url: { url: `data:image/jpeg;base64,${base64Image}` }
550                }
551              ]
559        const analysis = completion.choices[0].message.content || 
560          (language === 'en' 
561            ? "Unable to generate analysis from the image." 
562            : "इस छवि से विश्लेषण उत्पन्न करने में असमर्थ।");
563
581        return new Response(
582          language === 'en' 
583            ? 'Error processing image' 
584            : 'चित्र को संसाधित करने में त्रुटि', 
585          { status: 500 }
590      console.error('Analysis error:', error);
591      return new Response(
592        'Error processing image', 
593        { status: 500 }
594      );

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