CodeXdhruv/phi2-web

1import React, { useState } from "react";2 3function App() {4  const [messages, setMessages] = useState([]);5  const [input, setInput] = useState("");6  const [loading, setLoading] = useState(false);7 8  const sendMessage = async () => {9    if (!input.trim()) return;10 11    const userMessage = { role: "user", content: input };12    setMessages((prev) => [...prev, userMessage]);13    setLoading(true);14 15    try {16      // Replace with your local server URL17      const response = await fetch("http://localhost:8080/v1/chat/completions", {18        method: "POST",19        headers: { "Content-Type": "application/json" },20        body: JSON.stringify({21          model: "your-model-name", // usually gguf filename without .gguf22          messages: [{ role: "user", content: input }],23          stream: false24        }),25      });26 27      const data = await response.json();28 29      const botMessage = {30        role: "assistant",31        content: data.choices?.[0]?.message?.content || "No response",32      };33 34      setMessages((prev) => [...prev, botMessage]);35    } catch (error) {36      console.error("Error:", error);37      setMessages((prev) => [38        ...prev,39        { role: "assistant", content: "⚠️ Server Error or Model not running" },40      ]);41    }42 43    setLoading(false);44    setInput("");45  };46 47  return (48    <div style={styles.container}>49      <h1 style={styles.heading}>Local GGUF Chatbot</h1>50 51      <div style={styles.chatBox}>52        {messages.map((msg, index) => (53          <div54            key={index}55            style={{56              ...styles.message,57              alignSelf: msg.role === "user" ? "flex-end" : "flex-start",58              background: msg.role === "user" ? "#d1e7ff" : "#e6e6e6",59            }}60          >61            <strong>{msg.role === "user" ? "You" : "Bot"}:</strong>{" "}62            {msg.content}63          </div>64        ))}65 66        {loading && <div style={styles.loading}>Typing...</div>}67      </div>68 69      <div style={styles.inputContainer}>70        <input71          style={styles.input}72          value={input}73          onChange={(e) => setInput(e.target.value)}74          placeholder="Type your message..."75        />76 77        <button style={styles.button} onClick={sendMessage} disabled={loading}>78          Send79        </button>80      </div>81    </div>82  );83}84 85const styles = {86  container: {87    fontFamily: "Arial",88    width: "100%",89    maxWidth: 600,90    margin: "0 auto",91    paddingTop: 40,92  },93  heading: {94    textAlign: "center",95  },96  chatBox: {97    border: "1px solid #ccc",98    borderRadius: 8,99    padding: 16,100    height: "70vh",101    overflowY: "auto",102    display: "flex",103    flexDirection: "column",104    gap: 10,105    background: "#fafafa",106  },107  message: {108    padding: 10,109    borderRadius: 8,110    maxWidth: "80%",111    lineHeight: 1.4,112  },113  loading: {114    fontStyle: "italic",115    color: "#888",116  },117  inputContainer: {118    display: "flex",119    gap: 10,120    marginTop: 20,121  },122  input: {123    flex: 1,124    padding: 10,125    borderRadius: 6,126    border: "1px solid #ccc",127    fontSize: 16,128  },129  button: {130    padding: "10px 20px",131    fontSize: 16,132    border: "none",133    borderRadius: 6,134    background: "#007bff",135    color: "white",136    cursor: "pointer",137  },138};139 140export default App;141