import React, { useState } from "react"; import { View, Button, Image, ActivityIndicator, Text, ScrollView, } from "react-native"; import * as ImagePicker from "expo-image-picker"; import { API_KEY, MODEL_NAME } from "@env"; const ChipDetection = ({ updateChipCount }) => { const [imageUri, setImageUri] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [lastDetectedChips, setLastDetectedChips] = useState({}); const requestCameraPermissions = async () => { const cameraPermission = await ImagePicker.requestCameraPermissionsAsync(); return cameraPermission.granted; }; const pickImage = async () => { const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, base64: true, quality: 1, }); if (!result.canceled) { setImageUri(result.assets[0].uri); await processImage(result.assets[0].base64); } }; const takePhoto = async () => { const hasPermission = await requestCameraPermissions(); if (!hasPermission) { setError("Camera permission is required to take a photo."); return; } const result = await ImagePicker.launchCameraAsync({ base64: true, quality: 1, }); if (!result.canceled) { setImageUri(result.assets[0].uri); await processImage(result.assets[0].base64); } }; const processImage = async (base64Image) => { setLoading(true); setError(null); try { const response = await fetch( "https://api.openai.com/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${API_KEY}`, "Content-Type": "application/json", }, body: JSON.stringify({ model: MODEL_NAME, messages: [ { role: "system", content: "Identify and count poker chips by color. Return only the count for each color in JSON format.", }, { role: "user", content: [ { type: "text", text: "How many poker chips are there for each color? Return structured JSON.", }, { type: "image_url", image_url: { url: `data:image/png;base64,${base64Image}` }, }, ], }, ], max_tokens: 1000, }), } ); const result = await response.json(); if (!response.ok || !result.choices || !result.choices[0].message) { throw new Error("Invalid response from API."); } const rawContent = result.choices[0].message.content.trim(); const cleanJSON = rawContent.replace(/```json|```/g, "").trim(); const parsedData = JSON.parse(cleanJSON); // Filter out colors with a count of 0 const filteredData = Object.fromEntries( Object.entries(parsedData).filter(([_, count]) => count > 0) ); setLastDetectedChips(filteredData); // Store detected chip counts updateChipCount(filteredData); } catch (error) { setError("Failed to analyze the image."); } finally { setLoading(false); } }; return (