81 lines
2.1 KiB
JavaScript
81 lines
2.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import './GeminiTest.css';
|
|
import GeminiService from '../services/GeminiService';
|
|
|
|
const GeminiTest = () => {
|
|
const [prompt, setPrompt] = useState('Write a short recipe for spaghetti bolognese.');
|
|
const [response, setResponse] = useState('');
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState(null);
|
|
|
|
// Initialize Gemini service with the API key
|
|
const geminiService = new GeminiService('AIzaSyAIxqZ9V0Ozj1u5-WCGdSu6_MNSKyCuRJU');
|
|
|
|
const handleTest = async () => {
|
|
if (!prompt.trim()) return;
|
|
|
|
setIsLoading(true);
|
|
setError(null);
|
|
setResponse('');
|
|
|
|
try {
|
|
// Call Gemini API
|
|
const result = await geminiService.generateText(prompt, {
|
|
temperature: 0.7,
|
|
maxOutputTokens: 2048
|
|
});
|
|
|
|
setResponse(result.text);
|
|
} catch (err) {
|
|
console.error('Error testing Gemini API:', err);
|
|
setError(err.message || 'Failed to get response from Gemini API');
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="gemini-test">
|
|
<h2>Gemini API Test</h2>
|
|
|
|
<div className="test-form">
|
|
<div className="form-group">
|
|
<label htmlFor="prompt">Test Prompt:</label>
|
|
<textarea
|
|
id="prompt"
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
rows={4}
|
|
placeholder="Enter a prompt to test the Gemini API"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
className="test-button"
|
|
onClick={handleTest}
|
|
disabled={isLoading}
|
|
>
|
|
{isLoading ? 'Testing...' : 'Test API'}
|
|
</button>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="error-message">
|
|
<p>{error}</p>
|
|
</div>
|
|
)}
|
|
|
|
{response && (
|
|
<div className="response-container">
|
|
<h3>API Response:</h3>
|
|
<div className="response-content">
|
|
<pre>{response}</pre>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default GeminiTest;
|