11/21/24, 1:20 PM Code

1
2 // "use client"
3 // import { GoogleGenerativeAI } from "@google/generative-ai";
4 // import React, { useState, useEffect } from "react";
5 // import ReactDOM from "react-dom";
6
7 // interface ReportsItem {
8 // food: string;
9 // servingSize: string;
10 // }
11 // const Reports = () => {
12 // const [formData, setFormData] = useState({
13 // age: 25,
14 // gender: "male",
15 // activityLevel: "moderately-active",
16 // weight: 150,
17 // height: 68,
18 // goal: "lose-weight",
19 // allergies: "",
20 // likedFood: "chicken,rice,broccoli",
21 // dislikedFood: "fish,eggs,mushrooms",
22 // });
23 // const [reportsPlan, setReportsPlan] = useState("");
24
25 // const handleChange = (e: { target: { name: any; value: any; }; }) => {
26 // const { name, value } = e.target;
27 // setFormData({ ...formData, [name]: value });
28 // };
29 // const MODEL_NAME = "gemini-pro";
30 // const API_KEY = "AIzaSyDiZdV-eVJe1tOa-QSB8nMfiuiaQ4hB8j0";
31
32 // const handleSubmit = async (e: { preventDefault: () => void; }) => {
33 // e.preventDefault();
34 // const generationConfig = {
35 // temperature: 0.1,
36 // topK: 1,
37 // topP: 1,
38 // maxOutputTokens: 2048,
39 // };
40
41 // const parts = [
42 // { text: `Generate a personalized reports plan for a ${formData.age}
year old ${formData.gender}. ` +
43 // `Their activity level is ${formData.activityLevel}, weight is
${formData.weight} lbs, and height is ${formData.height} inches. ` +
44 // `Their goal is to ${formData.goal}. ` +
45 // `They are allergic to ${formData.allergies}. ` +
46 // `They like ${formData.likedFood} and dislike ${formData.dislikedFood}.
` +
47 // `Include a variety of foods and serving sizes. ` },
https://tarikjaber.github.io/Code-to-PDF/ 1/5
11/21/24, 1:20 PM Code

48 // ];
49
50 // const genAI = new GoogleGenerativeAI(API_KEY);
51 // const model = genAI.getGenerativeModel({ model: MODEL_NAME });
52 // const result = await model.generateContent({
53 // contents: [{ role: "user", parts }],
54 // generationConfig,
55 // });
56
57
58 // const response = result.response;
59 // setReportsPlan(response.text());
60 // };
61
62 // return (
63 // <div className="pt-20 pb-15 md:pt-40 md:pb-30 mx-10 md:mx-20 flex flex-
row gap-7">
64
65 // <div className="bg-[#1c2136] border-slate-700 border rounded-md w-
full p-3" >{reportsPlan}</div>
66 // </div>
67 // );
68 // };
69
70 // export default Reports;
71
72 "use client";
73
74 import { GoogleGenerativeAI } from "@google/generative-ai";
75 import React, { useState } from "react";
76
77 const Reports = () => {
78 const [uploadedFile, setUploadedFile] = useState<File | null>(null);
79 const [userPrompt, setUserPrompt] = useState("");
80 const [reportsInsights, setReportsInsights] = useState("");
81 const [error, setError] = useState("");
82
83 const MODEL_NAME = "gemini-pro";
84 const API_KEY = "AIzaSyDiZdV-eVJe1tOa-QSB8nMfiuiaQ4hB8j0";
85
86 const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
87 const file = e.target.files?.[0];
88 setUploadedFile(file || null);
89 };
90
91 const handlePromptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
92 setUserPrompt(e.target.value);
93 };
94
95 const handleSubmit = async (e: React.FormEvent) => {
96 e.preventDefault();

https://tarikjaber.github.io/Code-to-PDF/ 2/5
11/21/24, 1:20 PM Code

97
98 if (!uploadedFile && !userPrompt) {
99 setError("Please upload a file or enter a prompt.");
100 return;
101 }
102
103 setError("");
104 setReportsInsights("Processing your request...");
105
106 try {
107 // Simulate file processing (e.g., OCR for text extraction if needed)
108 let fileText = "";
109 if (uploadedFile) {
110 fileText = `File name: ${uploadedFile.name}. The file contains medical
or health-related data.`;
111 }
112
113 const genAI = new GoogleGenerativeAI(API_KEY);
114 const model = genAI.getGenerativeModel({ model: MODEL_NAME });
115
116 const generationConfig = {
117 temperature: 0.1,
118 topK: 1,
119 topP: 1,
120 maxOutputTokens: 2048,
121 };
122
123 const parts = [
124 { text: `Analyze the following input and provide detailed insights:\n`
},
125 { text: `${fileText}\n` },
126 { text: `User Request: ${userPrompt}` },
127 ];
128
129 const result = await model.generateContent({
130 contents: [{ role: "user", parts }],
131 generationConfig,
132 });
133
134 const response = result.response;
135 setReportsInsights(response.text());
136 } catch (error) {
137 setError("Failed to process the request. Please try again.");
138 console.error(error);
139 }
140 };
141
142 return (
143 <div className="pt-20 pb-15 md:pt-40 md:pb-30 mx-10 md:mx-20">
144 <form
145 className="bg-[#1c2136] border-slate-700 border rounded-md w-full p-5"

https://tarikjaber.github.io/Code-to-PDF/ 3/5
11/21/24, 1:20 PM Code

146 onSubmit={handleSubmit}
147 >
148 <h2 className="text-white text-xl font-bold mb-4">Upload Medical
Reports or Enter a Prompt</h2>
149
150 {/* File Upload */}
151 <div className="mb-4">
152 <label htmlFor="file-upload" className="text-white block mb-2">
153 Upload Medical Report (Optional)
154 </label>
155 <input
156 type="file"
157 id="file-upload"
158 accept=".jpg,.jpeg,.png,.pdf,.docx"
159 className="text-white"
160 onChange={handleFileUpload}
161 />
162 </div>
163
164 {/* User Prompt */}
165 <div className="mb-4">
166 <label htmlFor="user-prompt" className="text-white block mb-2">
167 What would you like to analyze or know?
168 </label>
169 <input
170 type="text"
171 id="user-prompt"
172 placeholder="E.g., 'Analyze this report for any signs of issues' or
'Identify abnormalities in this X-ray'"
173 value={userPrompt}
174 onChange={handlePromptChange}
175 className="w-full p-2 rounded-md bg-slate-800 text-white border
border-slate-600"
176 />
177 </div>
178
179 {/* Submit Button */}
180 <button
181 type="submit"
182 className="w-full bg-blue-600 text-white py-2 rounded-md hover:bg-
blue-700"
183 >
184 Generate Insights
185 </button>
186 </form>
187
188 {/* Error Message */}
189 {error && <p className="text-red-500 mt-4">{error}</p>}
190
191 {/* Report Insights */}

https://tarikjaber.github.io/Code-to-PDF/ 4/5
11/21/24, 1:20 PM Code

192 <div className="mt-5 bg-[#1c2136] border-slate-700 border rounded-md w-

full p-5">
193 <h2 className="text-white text-xl font-bold mb-4">Insights</h2>
194 <div className="text-white">{reportsInsights || "No insights yet."}
</div>
195 </div>
196
197 {/* Disclaimer */}
198 <div className="mt-5 text-center text-red-500 font-bold">
199 This is AI-generated content. Please consult a doctor for professional
advice.
200 </div>
201 </div>
202 );
203 };
204
205 export default Reports;
206

https://tarikjaber.github.io/Code-to-PDF/ 5/5