Val Town Code Search

cerebras_coder main.tsx1 match

@beybladeog•Updated 4 months ago

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

reactImageStackerApp main.tsx24 matches

@jjg•Updated 4 months ago

3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function ImageStacker() {
6  const [images, setImages] = useState<{src: string, width: number, height: number}[]>([]);
7  const canvasRef = useRef<HTMLCanvasElement>(null);
8
17        const reader = new FileReader();
18        reader.onload = (e) => {
19          const img = new Image();
20          img.onload = () => {
21            const canvas = canvasRef.current;
23              const ctx = canvas.getContext('2d');
24              if (ctx) {
25                // Determine minimum width across all images
26                const newImageEntry = { src: img.src, width: img.width, height: img.height };
27                const updatedImages = [...images, newImageEntry];
28                const minWidth = Math.min(...updatedImages.map(i => i.width));
29                const totalHeight = updatedImages.reduce((sum, img) => sum + img.height, 0);
30
31                // Set canvas dimensions precisely
33                canvas.height = totalHeight;
34
35                // Clear canvas and redraw all images scaled to min width
36                ctx.clearRect(0, 0, canvas.width, canvas.height);
37                let currentY = 0;
38                updatedImages.forEach(imgData => {
39                  const loadedImg = new Image();
40                  loadedImg.onload = () => {
41                    // Scale image to minimum width while maintaining aspect ratio
42                    const scaleFactor = minWidth / imgData.width;
43                    const scaledHeight = imgData.height * scaleFactor;
44                    
45                    ctx.drawImage(
46                      loadedImg, 
47                      0, 
55                });
56
57                // Update images state
58                setImages(updatedImages);
59              }
60            }
65      });
66    }
67  }, [images]);
68
69  const handleDownload = () => {
71    if (canvas) {
72      const link = document.createElement('a');
73      link.download = 'stacked-images.png';
74      link.href = canvas.toDataURL();
75      link.click();
95      <input 
96        type="file" 
97        accept="image/*" 
98        multiple 
99        onChange={handleFileUpload} 
110        }}
111      />
112      {images.length > 0 && (
113        <button onClick={handleDownload}>
114          Download Stacked Image
115        </button>
116      )}
117      <p>Drag and drop images or use file input to stack images</p>
118    </div>
119  );
128      padding: '20px' 
129    }}>
130      <h1>Image Stacker 🖼️</h1>
131      <ImageStacker />
132      <a 
133        href={import.meta.url.replace("esm.town", "val.town")} 
155    <html>
156      <head>
157        <title>Image Stacker</title>
158        <meta name="viewport" content="width=device-width, initial-scale=1">
159      </head>

cerebras_coder main.tsx1 match

@saravananarch•Updated 4 months ago

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

OpenAI README.md5 matches

@ianmenethil•Updated 4 months ago

23```
24
25## Images
26
27To send an image to ChatGPT, the easiest way is by converting it to a
28data URL, which is easiest to do with [@stevekrouse/fileToDataURL](https://www.val.town/v/stevekrouse/fileToDataURL).
29
30```ts title="Image Example" val
31import { fileToDataURL } from "https://esm.town/v/stevekrouse/fileToDataURL";
32
44    role: "user",
45    content: [{
46      type: "image_url",
47      image_url: {
48        url: dataURL,
49      },

cerebras_coder main.tsx1 match

@code01•Updated 4 months ago

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

tldc_discord main.tsx3 matches

@hyusap•Updated 4 months ago

16};
17
18type ImageData = {
19  type: "image";
20  text: string;
21  name?: string | undefined;
48};
49
50export type Data = BooleanData | TextData | ImageData | SpeechData | WebsiteData | FileData;
51
52type DataComponentRequestBody = {

cerebras_coder main.tsx1 match

@hanguru•Updated 4 months ago

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

cerebras_coder main.tsx1 match

@zenprocess•Updated 4 months ago

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

flowingBeigePigeon main.tsx31 matches

@lilymachado•Updated 4 months ago

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' }}

wildlifeRescueApp main.tsx13 matches

@lilymachado•Updated 4 months ago

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={{

« Previous

1...478 479 480 481 482 483 484...624

Projects

View all 97 projects

brainrot_image_gen1 file match

@dcm31•Updated 1 week ago

Generate images for Italian Brainrot characters using FAL AI

Users

View all 2 users

@Atiq1 project

Updated 3 days ago

"Focal Lens with Atig Wazir" "Welcome to my photography journey! I'm Atiq Wazir, a passionate photographer capturing life's beauty one frame at a time. Explore my gallery for stunning images, behind-the-scenes stories, and tips & tricks to enhance your own

Documentation

View all 7 documentation results

Val Town Code Search Return to Val Town

cerebras_coder main.tsx1 match

reactImageStackerApp main.tsx24 matches

cerebras_coder main.tsx1 match

OpenAI README.md5 matches

cerebras_coder main.tsx1 match

tldc_discord main.tsx3 matches

cerebras_coder main.tsx1 match

cerebras_coder main.tsx1 match

flowingBeigePigeon main.tsx31 matches

wildlifeRescueApp main.tsx13 matches

Projects

image-inpainting1 file match

brainrot_image_gen1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

cerebras_codermain.tsx1 match

reactImageStackerAppmain.tsx24 matches

cerebras_codermain.tsx1 match

OpenAIREADME.md5 matches

cerebras_codermain.tsx1 match

tldc_discordmain.tsx3 matches

cerebras_codermain.tsx1 match

cerebras_codermain.tsx1 match

flowingBeigePigeonmain.tsx31 matches

wildlifeRescueAppmain.tsx13 matches

Projects

image-inpainting1 file match

brainrot_image_gen1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

cerebras_coder main.tsx1 match

reactImageStackerApp main.tsx24 matches

cerebras_coder main.tsx1 match

OpenAI README.md5 matches

cerebras_coder main.tsx1 match

tldc_discord main.tsx3 matches

cerebras_coder main.tsx1 match

cerebras_coder main.tsx1 match

flowingBeigePigeon main.tsx31 matches

wildlifeRescueApp main.tsx13 matches