Spaces:
Running
Running
File size: 3,060 Bytes
4240b64 2cf76ae 4240b64 de4dd4d 4240b64 2cf76ae 4240b64 2cf76ae 4240b64 2cf76ae |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
import { useState } from 'react';
function App() {
const [messages, setMessages] = useState([]);
const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(false);
// Replace with your model path (e.g., "your-user/model")
const HF_MODEL_PATH = "theguywhosucks/Patchwork-26-beforetrain";
const handleSend = async () => {
if (!input.trim()) return;
setIsLoading(true);
setMessages([...messages, { text: input, sender: 'user' }]);
setInput('');
try {
const response = await fetch(
`https://api-inference.huggingface.co/models/${HF_MODEL_PATH}`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${process.env.HF_TOKEN}`,
},
body: JSON.stringify({ inputs: input }),
}
);
if (!response.ok) throw new Error('Failed to fetch');
const data = await response.json();
// Adjust this based on your model's output format
const botResponse = data[0]?.generated_text || data[0]?.answer || "Sorry, I couldn't generate a response.";
setMessages((prev) => [...prev, { text: botResponse, sender: 'bot' }]);
} catch (error) {
setMessages((prev) => [...prev, { text: "Error: Could not get a response.", sender: 'bot' }]);
} finally {
setIsLoading(false);
}
};
return (
<div style={{ maxWidth: '500px', margin: '0 auto', border: '1px solid #ccc', borderRadius: '8px', padding: '16px' }}>
<h2>Chatbot</h2>
<div style={{ height: '300px', overflowY: 'auto', border: '1px solid #eee', padding: '8px', marginBottom: '8px' }}>
{messages.map((msg, i) => (
<div key={i} style={{ textAlign: msg.sender === 'user' ? 'right' : 'left', margin: '4px 0' }}>
<span style={{
background: msg.sender === 'user' ? '#007bff' : '#f1f1f1',
color: msg.sender === 'user' ? 'white' : 'black',
padding: '4px 8px',
borderRadius: '4px',
display: 'inline-block'
}}>
{msg.text}
</span>
</div>
))}
{isLoading && <div style={{ textAlign: 'left', margin: '4px 0' }}>Typing...</div>}
</div>
<div style={{ display: 'flex' }}>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && handleSend()}
style={{ flex: 1, padding: '8px', border: '1px solid #ccc', borderRadius: '4px' }}
disabled={isLoading}
/>
<button
onClick={handleSend}
style={{
marginLeft: '8px',
padding: '8px 16px',
background: '#007bff',
color: 'white',
border: 'none',
borderRadius: '4px',
cursor: 'pointer'
}}
disabled={isLoading}
>
Send
</button>
</div>
</div>
);
}
export default App;
|