9import { useUsageStats } from "../hooks/useUsageStats.ts";
10import { Messages } from "./Messages.tsx";
11import { InputBox, ImageDropContainer } from "./InputBox.tsx";
12import { PreviewFrame } from "./PreviewFrame.tsx";
13import { BranchSelect } from "./BranchSelect.tsx";
61 refetch: () => void;
62}) {
63 const [images, setImages] = useState<(string | null)[]>([]);
64 const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
65 const { audio } = useContext(AppContext);
79 branchId,
80 selectedFiles,
81 images,
82 soundEnabled: audio,
83 });
99
100 return (
101 <ImageDropContainer running={running} images={images} setImages={setImages}>
102 <div className="chat-container container">
103 <div className="chat-messages">
116 onSubmit={(e) => {
117 handleSubmit(e);
118 setImages([]);
119 }}
120 onCancel={handleStop}
121 running={running}
122 error={error}
123 images={images}
124 setImages={setImages}
125 />
126 </div>
135 className="block-link text-link lockup"
136 >
137 {project.imageUrl ? (
138 <img src={project.imageUrl} className="image-thumbnail" />
139 ) : (
140 <div className="image-placeholder" />
141 )}
142 <div>
159 </div>
160 <pre hidden>{JSON.stringify(messages, null, 2)}</pre>
161 </ImageDropContainer>
162 );
163}
9import { useUsageStats } from "../hooks/useUsageStats.ts";
10import { Messages } from "./Messages.tsx";
11import { InputBox, ImageDropContainer } from "./InputBox.tsx";
12import { PreviewFrame } from "./PreviewFrame.tsx";
13import { BranchSelect } from "./BranchSelect.tsx";
67 refetch: () => void;
68}) {
69 const [images, setImages] = useState<(string|null)[]>([]);
70 const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
71 const { audio, user } = useContext(AppContext);
85 branchId,
86 selectedFiles,
87 images,
88 soundEnabled: audio,
89 });
109
110 return (
111 <ImageDropContainer
112 running={running}
113 images={images}
114 setImages={setImages}>
115 <div className="single-column-container">
116 <div className="single-sticky-header">
120 rel="norefferer"
121 className="block-link text-link lockup">
122 {project.imageUrl ? (
123 <img src={project.imageUrl} className="image-thumbnail" />
124 ) : user?.profileImageUrl ? (
125 <img
126 src={user.profileImageUrl}
127 className="avatar"
128 alt={user.username}
131 />
132 ) : (
133 <div className="image-placeholder" />
134 )}
135 <div>{project.name}</div>
154 onSubmit={e => {
155 handleSubmit(e);
156 setImages([]);
157 }}
158 onCancel={handleStop}
159 running={running}
160 error={error}
161 images={images}
162 setImages={setImages}
163 />
164 <div className="footer">
173 </div>
174 </div>
175 </ImageDropContainer>
176 );
177}
1050}
1051
1052// Export the diagram as an image
1053function exportDiagram() {
1054 // Create a temporary canvas with white background
1084
1085 // Copy the current canvas content
1086 tempCtx.drawImage(
1087 state.canvas,
1088 minX, minY, tempCanvas.width, tempCanvas.height,
1093 const link = document.createElement('a');
1094 link.download = \`\${state.diagramName || 'diagram'}.png\`;
1095 link.href = tempCanvas.toDataURL('image/png');
1096 link.click();
1097}
7- Create entities, relationships, and attributes
8- Drag and drop interface
9- Export diagrams as images
10- Save and load diagrams
11
103 description: z.string().max(64).optional()
104 .describe("Description for the MCP server (optional, max 64 characters)"),
105 imageUrl: z.string().url().optional().describe("URL to an image for the MCP server (optional)"),
106 },
107 async ({ name, privacy, description, imageUrl }: {
108 name: string;
109 privacy: "public" | "unlisted" | "private";
110 description?: string;
111 imageUrl?: string;
112 }) => {
113 try {
117 privacy,
118 ...(description !== undefined ? { description } : {}),
119 ...(imageUrl !== undefined ? { imageUrl } : {}),
120 };
121
106 description: z.string().max(64).optional()
107 .describe("Description for the MCP server (optional, max 64 characters)"),
108 imageUrl: z.string().url().optional().describe("URL to an image for the MCP server (optional)"),
109 },
110 async ({ name, privacy, description, imageUrl }: {
111 name: string;
112 privacy: "public" | "unlisted" | "private";
113 description?: string;
114 imageUrl?: string;
115 }) => {
116 try {
120 privacy,
121 ...(description !== undefined ? { description } : {}),
122 ...(imageUrl !== undefined ? { imageUrl } : {}),
123 };
124
23 ".jsx": "application/javascript",
24 ".json": "application/json",
25 ".svg": "image/svg+xml",
26};
27
406 id: 'q4',
407 question: 'How do you prefer to communicate?',
408 options: ['Written (text, email)', 'Visual (images, diagrams)', 'Verbal (speaking, presenting)', 'Demonstrative (showing by doing)']
409 },
410 {
84 bio: string;
85 expertise: string[];
86 imageUrl?: string;
87}
88
21});
22
23// API endpoint to analyze food image
24app.post("/api/analyze-food", async (c) => {
25 try {
27
28 const formData = await c.req.formData();
29 const imageFile = formData.get("image") as File;
30
31 if (!imageFile) {
32 console.error("No image provided in request");
33 return c.json({ error: "No image provided" }, 400);
34 }
35
36 console.log("Image received:", imageFile.name, imageFile.type, imageFile.size);
37
38 // Convert image to base64
39 const arrayBuffer = await imageFile.arrayBuffer();
40 const base64Image = btoa(
41 new Uint8Array(arrayBuffer).reduce((data, byte) => data + String.fromCharCode(byte), '')
42 );
43
44 console.log("Image converted to base64, length:", base64Image.length);
45
46 // Call OpenAI to analyze the image
47 console.log("Calling OpenAI API...");
48 const openai = new OpenAI();
52 {
53 role: "system",
54 content: "You are a nutritionist specializing in identifying food items and their calorie content from images. For each food item visible in the image, provide the name and estimated calories in the following JSON format with an 'items' array: {\"items\": [{\"food\": \"name\", \"calories\": number}, ...]}. Be specific about portion sizes when estimating calories. If you can't identify something clearly, make your best guess."
55 },
56 {
57 role: "user",
58 content: [
59 { type: "text", text: "What food items are in this image? Provide the name and estimated calories for each item." },
60 { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } }
61 ]
62 }
97 console.error("Error analyzing food:", error);
98 return c.json({
99 error: "Failed to analyze image",
100 details: String(error),
101 items: []
