Val Town Code SearchReturn to Val Town

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
7To use this, fork it to your account. 

60  const { ValTown } = await import("npm:@valtown/sdk");
61  const vt = new ValTown();
62  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
63  // const authorEmail = me.email;
64
128
129  c.set("email", email);
130  c.set("profile", { profileImageUrl, username });
131  await next();
132};

437          {profile && (
438            <div className="flex items-center space-x-4">
439              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
440              <span>{profile.username}</span>
441              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
580                            alt="Blob content"
581                            className="max-w-full h-auto"
582                            onError={() => console.error("Error loading image")}
583                          />
584                        </div>
630                  <li>Create public shareable links for blobs</li>
631                  <li>View and manage public folder</li>
632                  <li>Preview images directly in the interface</li>
633                </ul>
634              </div>

242. **Reference Scaling**: Uses known body proportions or user-provided reference measurements
253. **Anthropometric Calculations**: Applies standard body measurement formulas
264. **Real-time Processing**: Processes images and returns measurements instantly
27
28## Usage
35
36- **Backend**: Hono.js with pose detection and measurement calculations
37- **Frontend**: React with image upload and results display
38- **Computer Vision**: Currently uses mock pose detection (see integration guide below)
39- **Calculations**: Anthropometric formulas for body measurements
58## API Endpoints
59
60- `POST /api/measure` - Upload image and get body measurements
61- `POST /api/report` - Download measurements as text file
62- `GET /api/health` - Health check endpoint
88
89The system currently:
90- ✅ Provides a complete web interface for image upload
91- ✅ Validates image format and size
92- ✅ Implements comprehensive measurement calculations
93- ✅ Uses anthropometric formulas for accurate estimations
105
106Accuracy depends on:
1071. **Photo quality**: Clear, well-lit, full-body images
1082. **Pose quality**: Upright stance with arms slightly away from body
1093. **Reference measurement**: Providing actual height significantly improves accuracy

38  }
39
40  async detectPose(imageData: string): Promise<PoseLandmark[] | null> {
41    if (!this.initialized) {
42      await this.initialize();
44
45    return new Promise((resolve) => {
46      // Convert base64 to image element
47      const img = new Image();
48      img.onload = () => {
49        // Create canvas and draw image
50        const canvas = document.createElement('canvas');
51        const ctx = canvas.getContext('2d');
52        canvas.width = img.width;
53        canvas.height = img.height;
54        ctx.drawImage(img, 0, 0);
55
56        // Set up pose detection callback
70        });
71
72        // Send image to MediaPipe
73        this.pose.send({ image: canvas });
74      };
75
76      img.onerror = () => resolve(null);
77      img.src = imageData;
78    });
79  }
102  }
103
104  async detectPose(imageData: string): Promise<PoseLandmark[] | null> {
105    // Convert base64 to tensor
106    const imageBuffer = Buffer.from(imageData.split(',')[1], 'base64');
107    const imageTensor = tf.node.decodeImage(imageBuffer, 3);
108    
109    // Detect pose
110    const pose = await this.model.estimateSinglePose(imageTensor, {
111      flipHorizontal: false
112    });
115    if (pose.score > 0.5) {
116      const landmarks = pose.keypoints.map(keypoint => ({
117        x: keypoint.position.x / imageTensor.shape[1], // Normalize to 0-1
118        y: keypoint.position.y / imageTensor.shape[0], // Normalize to 0-1
119        z: 0, // PoseNet doesn't provide z-coordinate
120        visibility: keypoint.score
121      }));
122      
123      imageTensor.dispose();
124      return landmarks;
125    }
126
127    imageTensor.dispose();
128    return null;
129  }
1871. MediaPipe for web applications (client-side processing)
1882. TensorFlow.js PoseNet for server-side processing
1893. Combine with OpenCV for additional image preprocessing
190
191Steps to implement:
1921. Replace the mock PoseDetector with a real implementation
1932. Add proper error handling for different image formats
1943. Implement image preprocessing (resize, normalize, etc.)
1954. Add confidence thresholds and validation
1965. Consider caching models for better performance

4import { PoseDetector } from "./pose-detection.ts";
5import { BodyMeasurementCalculator } from "./measurements.ts";
6import { validateImageData, validateReferenceHeight, calculateConfidenceScore, generateMeasurementReport } from "./utils.ts";
7import type { MeasurementRequest, MeasurementResponse } from "../shared/types.ts";
8
30      apiEndpoint: '/api/measure',
31      maxFileSize: 10 * 1024 * 1024, // 10MB
32      supportedFormats: ['image/jpeg', 'image/png', 'image/webp']
33    };
34  </script>`;
44    
45    // Validate input
46    const imageValidation = validateImageData(body.imageData);
47    if (!imageValidation.valid) {
48      return c.json<MeasurementResponse>({
49        success: false,
50        error: imageValidation.error
51      }, 400);
52    }
61    
62    // Detect pose landmarks
63    const landmarks = await poseDetector.detectPose(body.imageData);
64    if (!landmarks) {
65      return c.json<MeasurementResponse>({
66        success: false,
67        error: "Failed to detect pose in the image. Please ensure the person is clearly visible and standing upright."
68      }, 400);
69    }
99    return c.json<MeasurementResponse>({
100      success: false,
101      error: "An error occurred while processing the image. Please try again."
102    }, 500);
103  }
110    
111    // Validate input
112    const imageValidation = validateImageData(body.imageData);
113    if (!imageValidation.valid) {
114      return c.text(imageValidation.error || "Invalid image", 400);
115    }
116    
117    // Detect pose and calculate measurements
118    const landmarks = await poseDetector.detectPose(body.imageData);
119    if (!landmarks) {
120      return c.text("Failed to detect pose in the image", 400);
121    }
122    
156    endpoints: {
157      "POST /api/measure": {
158        description: "Calculate body measurements from an image",
159        body: {
160          imageData: "string (base64 encoded image)",
161          referenceHeight: "number (optional, height in cm)",
162          gender: "string (optional, 'male' or 'female')"
185    },
186    notes: [
187      "Images should be clear, full-body photos with the person standing upright",
188      "Supported formats: JPEG, PNG, WebP",
189      "Maximum file size: 10MB",

54            background-color: #eff6ff;
55        }
56        .preview-image {
57            max-width: 100%;
58            max-height: 400px;
94
95        const App = () => {
96            const [selectedImage, setSelectedImage] = useState(null);
97            const [imagePreview, setImagePreview] = useState(null);
98            const [measurements, setMeasurements] = useState(null);
99            const [loading, setLoading] = useState(false);
104            const fileInputRef = useRef(null);
105
106            const handleImageSelect = useCallback((file) => {
107                if (!file) return;
108
109                // Validate file type
110                if (!file.type.startsWith('image/')) {
111                    setError('Please select a valid image file');
112                    return;
113                }
115                // Validate file size (10MB)
116                if (file.size > 10 * 1024 * 1024) {
117                    setError('Image size must be less than 10MB');
118                    return;
119                }
120
121                setError(null);
122                setSelectedImage(file);
123
124                // Create preview
125                const reader = new FileReader();
126                reader.onload = (e) => {
127                    setImagePreview(e.target.result);
128                };
129                reader.readAsDataURL(file);
132            const handleFileInput = (e) => {
133                const file = e.target.files[0];
134                handleImageSelect(file);
135            };
136
139                e.stopPropagation();
140                const file = e.dataTransfer.files[0];
141                handleImageSelect(file);
142            };
143
148
149            const calculateMeasurements = async () => {
150                if (!selectedImage) {
151                    setError('Please select an image first');
152                    return;
153                }
161                    const reader = new FileReader();
162                    reader.onload = async (e) => {
163                        const imageData = e.target.result;
164                        
165                        const requestBody = {
166                            imageData,
167                            referenceHeight: referenceHeight ? parseFloat(referenceHeight) : undefined,
168                            gender
186                        }
187                    };
188                    reader.readAsDataURL(selectedImage);
189                } catch (err) {
190                    setError('An error occurred while processing the image');
191                    console.error('Measurement error:', err);
192                } finally {
196
197            const downloadReport = async () => {
198                if (!selectedImage) return;
199
200                try {
201                    const reader = new FileReader();
202                    reader.onload = async (e) => {
203                        const imageData = e.target.result;
204                        
205                        const requestBody = {
206                            imageData,
207                            referenceHeight: referenceHeight ? parseFloat(referenceHeight) : undefined,
208                            gender
231                        }
232                    };
233                    reader.readAsDataURL(selectedImage);
234                } catch (err) {
235                    setError('Failed to download report');
309                        // Upload area
310                        React.createElement('div', { className: 'bg-white rounded-lg shadow-md p-6' },
311                            React.createElement('h2', { className: 'text-xl font-semibold mb-4' }, 'Upload Image'),
312                            
313                            !imagePreview ? 
314                                React.createElement('div', {
315                                    className: 'upload-area',
328                                React.createElement('div', { className: 'text-center' },
329                                    React.createElement('img', {
330                                        src: imagePreview,
331                                        alt: 'Preview',
332                                        className: 'preview-image mx-auto mb-4'
333                                    }),
334                                    React.createElement('button', {
335                                        onClick: () => fileInputRef.current?.click(),
336                                        className: 'px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors'
337                                    }, 'Change Image')
338                                ),
339                            
341                                ref: fileInputRef,
342                                type: 'file',
343                                accept: 'image/*',
344                                onChange: handleFileInput,
345                                className: 'hidden'
388                            React.createElement('button', {
389                                onClick: calculateMeasurements,
390                                disabled: !selectedImage || loading,
391                                className: `w-full px-6 py-3 bg-blue-600 text-white rounded-md font-medium hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors flex items-center justify-center space-x-2`
392                            },
469                            React.createElement('h2', { className: 'text-xl font-semibold text-gray-700 mb-2' }, 'No Measurements Yet'),
470                            React.createElement('p', { className: 'text-gray-500' },
471                                'Upload an image and click "Calculate Measurements" to get started'
472                            )
473                        )
485                                React.createElement('li', null, 'Person standing upright and straight'),
486                                React.createElement('li', null, 'Arms slightly away from body'),
487                                React.createElement('li', null, 'Good lighting and clear image'),
488                                React.createElement('li', null, 'Minimal background clutter')
489                            )

1// Utility functions for image processing and validation
2
3export function validateImageData(imageData: string): { valid: boolean; error?: string } {
4  try {
5    // Check if it's a valid base64 string
6    if (!imageData.startsWith('data:image/')) {
7      return { valid: false, error: 'Invalid image format. Please upload a valid image.' };
8    }
9
10    // Extract the base64 part
11    const base64Data = imageData.split(',')[1];
12    if (!base64Data) {
13      return { valid: false, error: 'Invalid base64 image data.' };
14    }
15
25    const maxSizeInMB = 10;
26    if (sizeInBytes > maxSizeInMB * 1024 * 1024) {
27      return { valid: false, error: `Image too large. Maximum size is ${maxSizeInMB}MB.` };
28    }
29
30    return { valid: true };
31  } catch (error) {
32    return { valid: false, error: 'Failed to validate image data.' };
33  }
34}

13  }
14
15  async detectPose(imageData: string): Promise<PoseLandmark[] | null> {
16    if (!this.initialized) {
17      await this.initialize();
21      // For demonstration, we'll use a mock pose detection
22      // In production, you would:
23      // 1. Decode the base64 image
24      // 2. Process with MediaPipe Pose
25      // 3. Return the 33 pose landmarks
134    
135    if (head.y > 0.1 || feet < 0.85) {
136      issues.push('Full body should be visible in the image');
137    }
138    

44
45export interface MeasurementRequest {
46  imageData: string; // base64 encoded image
47  referenceHeight?: number; // Optional reference height in cm for scaling
48  gender?: 'male' | 'female'; // For gender-specific calculations