[ADD] Added simple avatar

frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:22.3.0-alpine3.19
+FROM node:20.11.1-alpine3.19
 
 WORKDIR /frontend
 

frontend/app/layout.js

@@ -29,6 +29,7 @@ export default function RootLayout({ children }) {
           {children}
         </ClientAuthProvider>
       </body>
+
     </html>
   );
 }

frontend/app/setup-assistant/page.jsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import Sidebar from "@/components/Sidebar";
 import { Volume2 } from "lucide-react";
-import axios from "axios";
 import { createAgent } from '@/app/api/agents';
 import { useDispatch } from 'react-redux';
 import { setAgentId } from '@/store/ChatSlice';
@@ -30,7 +29,7 @@ const CreateAgentPage = () => {
     jobField: "",
     greeting: "",
     prompt: "",
-    llm: "gpt-4o",
+    llm: "",
     customKnowledge: "",
     files: [],
   });
@@ -61,7 +60,6 @@ const CreateAgentPage = () => {
     return () => clearInterval(timer);
   }, [countdown, showAlert]);
 
-  const XI_API_KEY = process.env.NEXT_PUBLIC_XI_API_KEY;
 
   const handleInputChange = (e) => {
     const { name, value } = e.target;
@@ -77,20 +75,23 @@ const CreateAgentPage = () => {
       alert("Please enter a job field first");
       return;
     }
+
     setIsGeneratingAvatar(true);
     setShowAlert(true);
-    setCountdown(40);
+    setCountdown(10);
+
     try {
       const avatarUrl = await GenerateAvatar(agentData.avatar);
-      if (avatarUrl) {
-        setAgentData(prevData => ({
-          ...prevData,
-          avatar: avatarUrl
-        }));
-      }
+      setAgentData(prevData => ({
+        ...prevData,
+        avatar: avatarUrl || DEFAULT_AVATAR_URL
+      }));
     } catch (error) {
-      console.error('Error generating avatar:', error);
-      alert('Failed to generate avatar. Please try again.');
+      //console.error('Error generating avatar:', error);
+      setAgentData(prevData => ({
+        ...prevData,
+        avatar: DEFAULT_AVATAR_URL
+      }));
     } finally {
       setIsGeneratingAvatar(false);
       setShowAlert(false);
@@ -150,6 +151,7 @@ const CreateAgentPage = () => {
         return;
       }
       const result = await createAgent(formData, token);
+
       dispatch(setAgentId(result));
       router.push('/assistants');
     } catch (error) {
@@ -305,7 +307,8 @@ const CreateAgentPage = () => {
                       value={agentData.agent_llm}
                       onChange={handleInputChange}
                       className="w-full bg-white bg-opacity-20 rounded-md p-3 text-white"
-                    >
+                    >  
+                      <option value="" className="bg-gray-800">Select LLM</option>
                       <option value="gpt-4o-mini" className=" bg-gray-800">
                         GPT-4o-Mini
                       </option>

frontend/components/My-agents.jsx

@@ -8,8 +8,7 @@ const Dashboard = () => {
   const [error, setError] = useState(null);
   const [deleteLoading, setDeleteLoading] = useState(null);
   const router = useRouter();
-
-  useEffect(() => {
+    useEffect(() => {
     const fetchAgents = async () => {
       try {
         const token = localStorage.getItem("access");
@@ -34,7 +33,6 @@ const Dashboard = () => {
 
     fetchAgents();
   }, []);
-
   const handleViewAgent = (agent) => {
     localStorage.setItem('currentAgentName', agent.agent_name);
     localStorage.setItem('currentAgentId', agent.id);

frontend/lib/GenerateAvatar.js

@@ -1,5 +1,14 @@
+export const DEFAULT_AVATAR_URL = "https://obj-store.livepeer.cloud/livepeer-cloud-ai-images/64755765/2f7c5ee4.png";
+export const TIMEOUT_DURATION = 10000; // 10 seconds for Vercel
+
+
 const GenerateAvatar = async (prompt) => {
   try {
+    // for testing
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_DURATION);
+
+
     const response = await fetch("/api/livepeer/generate-image", {
       method: "POST",
       headers: {
@@ -10,8 +19,9 @@ const GenerateAvatar = async (prompt) => {
         width: 1024,
         height: 1024,
       }),
+      signal: controller.signal
     });
-
+ clearTimeout(timeoutId);
     const data = await response.json();
 
     if (!data.success) {
@@ -27,8 +37,11 @@ const GenerateAvatar = async (prompt) => {
     }
 
   } catch (err) {
-    console.error("Error:", err); // Debug log
-    throw new Error(err.message); // Throw the error to propagate it properly
+    //console.error("Error:", err); // Debug log
+    if (err.name === 'AbortError') {
+      return DEFAULT_AVATAR_URL;
+    }
+    throw new Error(err.message);
   }
 };