שחכתי להגיד, תמיד תוכלו ליצור כל מיני סוגים שונים, הקוד למעלה זה רק צאט עם דמויות מסויימות
מה שמומלץ זה שיהיה קוד התחלה, ואז לפתוח שיחה חדשה כדי שהתשובה הראשונה תיהיה האפליקציה, וככה זה ממש קל לשתף אותה עם אחרים

@shishko זה לא אפליקציה באמת... זה מה שפרסמו פה

@דוד-המלך-3 כתב בשיתוף | אשכול יצירות Gemini canvas:

יש

אוקי כתבתי מדריך.. בתקווה שזה בסדר, ולא פשוט מידי https://mitmachim.top/topic/95863/מדריך-איך-יוצרים-אפליקציה-ב-gemini-canvas

קודם כל, מי שכבר יודע איך, שלא יקרא את זה, כי זה מדריך למתחילים יותר!

לאחר שנפתח נושא כאן של כל מיני אפליקציות שבנויות על צאט עם ג'ימיני,
הגיע הזמן ללמד בקצרה ובצורה הכי קלה איך ליצור כזה אפליקציה

דברים שצריך לדעת |
1 - בשביל שיתוף אפליקציה כזאת, צריך שהתשובה הראשונה בג'ימיני תיהיה האפליקציה המושלמת ככה לא מסתבכים עם השיתוף,
2 - אם יצא טעות קטנה, או שאתם רוצים להוסיף דמות, אפשר להוסיף ידני, וככה זה ישאר על התשובה הראשונה בשיחה עם ג'ימיני
(3 - אני מאמין שזה יחסם בקרוב בנטפרי..)

לכן אני מעלה כאן "קוד" של אפליקציה בסגנון, ומי שרוצה לבנות כזה, שיעתיק את הקוד וישלח לג'ימיני על מצב קנבס חובה, ויגיד לו מה הוא רוצה לשנות (דמויות , שם , אופי, או עיצוב טיפה שונה, כמה זמן תיהיה תגובה של הדמות, ועוד)
אממ לפני שאני יעלה את הקוד, לא ידוע לי שאפשר לשמור שיחות, או לשתף, או לשמור היסטוריה.. אם יש אופציה אני אשמח שיעדכנו אותי

זה הקוד

import React, { useState, useRef, useEffect } from "react";
import { Send, CheckCircle2, Plus, X, User } from "lucide-react";

const defaultMembers = [
  { id: "saba", role: "סבא", name: "ולדימיר", desc: "מרוסיה במקור, גר בתל אביב כבר 40 שנה. מדבר עם מבטא רוסי כבד, מספר סיפורים על המולדת, שותה תה עם ריבה.", color: "#7F77DD", gender: "m" },
  { id: 1, role: "האח הגדול", name: "ג'קי", desc: "אקסצנטרי ומוזר! עונה קצר ומבלבל, תמיד מזכיר את הדגים שלו באקווריום. מתייחס לכל שיחה כאילו היא על דגים.", color: "#1D9E75", gender: "m" },
  { id: 2, role: "אחות", name: "רונית", desc: "מנהלת משרד לשעבר, עכשיו מאמנת יוגה. שולחת המון סמיילים, אוהבת לצטט ספרי עזרה עצמית.", color: "#D4537E", gender: "f" },
  { id: 3, role: "אח", name: "דורון", desc: "גיק טכנולוגיה מושבע, תושב הרצליה. מסביר כל דבר דרך אנלוגיות מהעולם הדיגיטלי. עונה בצורה מסודרת עם כותרות.", color: "#378ADD", gender: "m" },
  { id: 4, role: "אח", name: "מוטי", desc: "שף חובב נלהב, תושב ראשון לציון. כל שיחה מסתיימת בהמלצת מתכון. תמיד שמח ומוסיף אמוג'י של אוכל.", color: "#639922", gender: "m" },
  { id: 5, role: "אח", name: "בני", desc: "לשעבר שחקן כדורגל חובב, עכשיו אוהד נלהב. בטוח שהוא מבין בכדורגל יותר מכולם. קצת נוסטלגי.", color: "#BA7517", gender: "m" },
  { id: 6, role: "אח", name: "שלומי", desc: "הנוסע הנצחי של המשפחה, חזר לפני חצי שנה מדרום אמריקה. תמיד משווה הכל לניסיון שלו בפרו או בברזיל.", color: "#D85A30", gender: "m" },
];

const COLORS = ["#7F77DD","#1D9E75","#D4537E","#378ADD","#639922","#BA7517","#D85A30","#185FA5","#993556","#3B6D11"];

const MODES = [
  { id: "short", label: "זריז", emoji: "⚡", desc: "תגובות קצרות ומהירות" },
  { id: "normal", label: "רגיל", emoji: "💬", desc: "שיחה טבעית" },
  { id: "deep", label: "מעמיק", emoji: "🧠", desc: "פירוט ועומק" },
];

function getInitials(name) {
  return name?.slice(0, 2) || "?";
}

function Avatar({ name, color, size = 36 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: "50%",
      background: color + "20", border: `2px solid ${color}50`,
      display: "flex", alignItems: "center", justifyContent: "center",
      fontSize: size * 0.36, fontWeight: 700, color, flexShrink: 0,
      letterSpacing: "-0.5px"
    }}>
      {getInitials(name)}
    </div>
  );
}

function TypingBubble({ member }) {
  return (
    <div style={{
      display: "flex", alignItems: "flex-end", gap: 8,
      animation: "slideIn 0.25s ease-out"
    }}>
      <Avatar name={member.name} color={member.color} size={32} />
      <div>
        <div style={{ fontSize: 11.5, fontWeight: 600, color: member.color, marginBottom: 3, marginRight: 4 }}>
          {member.name} {member.gender === "f" ? "מקלידה" : "מקליד"}...
        </div>
        <div style={{
          background: "#fff",
          padding: "10px 16px",
          borderRadius: "4px 18px 18px 18px",
          boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
          display: "flex", gap: 5, alignItems: "center", width: 54,
        }}>
          {[0, 1, 2].map(i => (
            <div key={i} style={{
              width: 7, height: 7, borderRadius: "50%",
              background: member.color,
              opacity: 0.7,
              animation: `bounce 1.1s ease-in-out ${i * 0.18}s infinite`
            }} />
          ))}
        </div>
      </div>
    </div>
  );
}

function MessageBubble({ msg, showSender }) {
  const isUser = msg.role === "user";
  return (
    <div style={{
      display: "flex",
      justifyContent: isUser ? "flex-end" : "flex-start",
      animation: "slideIn 0.2s ease-out"
    }}>
      <div style={{ display: "flex", alignItems: "flex-end", gap: 8, maxWidth: "78%" }}>
        {!isUser && <Avatar name={msg.sender} color={msg.color} size={32} />}
        <div>
          {!isUser && showSender && (
            <div style={{ fontSize: 11.5, fontWeight: 700, color: msg.color, marginBottom: 3, marginRight: 4 }}>
              {msg.sender}
            </div>
          )}
          <div style={{
            background: isUser ? "#d9fdd3" : "#fff",
            color: "#111b21",
            padding: "8px 12px 9px",
            borderRadius: isUser ? "18px 4px 18px 18px" : (showSender ? "4px 18px 18px 18px" : "18px 18px 18px 4px"),
            fontSize: 14.5,
            lineHeight: 1.45,
            boxShadow: "0 1px 2px rgba(0,0,0,0.08)",
            position: "relative",
            wordBreak: "break-word"
          }}>
            {msg.text}
            <div style={{ fontSize: 10, color: "#8696a0", textAlign: "left", marginTop: 2 }}>
              {new Date().toLocaleTimeString("he-IL", { hour: "2-digit", minute: "2-digit" })}
            </div>
          </div>
        </div>
        {isUser && (
          <div style={{
            width: 32, height: 32, borderRadius: "50%",
            background: "#d9fdd3",
            display: "flex", alignItems: "center", justifyContent: "center",
            flexShrink: 0, boxShadow: "0 1px 2px rgba(0,0,0,0.1)"
          }}>
            <User size={15} color="#005c4b" />
          </div>
        )}
      </div>
    </div>
  );
}

// Helper to make API calls with retry
const fetchWithRetry = async (url, options, retries = 5) => {
  const delays = [1000, 2000, 4000, 8000, 16000];
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url, options);
      if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
      return await response.json();
    } catch (e) {
      if (i === retries - 1) throw e;
      await new Promise(res => setTimeout(res, delays[i]));
    }
  }
};

export default function App() {
  const [members, setMembers] = useState(defaultMembers);
  const [selected, setSelected] = useState(["saba", 1, 3]);
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [typingMember, setTypingMember] = useState(null);
  const [mode, setMode] = useState("normal");

  const [showAddModal, setShowAddModal] = useState(false);
  const [newName, setNewName] = useState("");
  const [newRole, setNewRole] = useState("");
  const [newDesc, setNewDesc] = useState("");
  const [newGender, setNewGender] = useState("m");

  const bottomRef = useRef(null);
  const abortRef = useRef(false);
  const textareaRef = useRef(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [messages, typingMember]);

  const toggle = (id) =>
    setSelected(prev => prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);

  const addMember = () => {
    if (!newName.trim()) return;
    const newId = Date.now();
    const color = COLORS[members.length % COLORS.length];
    setMembers(prev => [...prev, {
      id: newId, role: newRole.trim() || "קרוב משפחה",
      name: newName.trim(), desc: newDesc.trim() || "", color, gender: newGender
    }]);
    setSelected(prev => [...prev, newId]);
    setNewName(""); setNewRole(""); setNewDesc(""); setNewGender("m");
    setShowAddModal(false);
  };

  const removeMember = (id, e) => {
    e.stopPropagation();
    setMembers(prev => prev.filter(m => m.id !== id));
    setSelected(prev => prev.filter(x => x !== id));
  };

  const sleep = ms => new Promise(r => setTimeout(r, ms));

  const sendMessage = async () => {
    const text = input.trim();
    if (!text || selected.length === 0 || loading) return;
    setInput("");
    abortRef.current = false;

    const userMsg = { role: "user", text, id: Date.now() };
    setMessages(prev => [...prev, userMsg]);
    setLoading(true);

    const activeMembers = members.filter(m => selected.includes(m.id));

    const membersDesc = activeMembers
      .map(m => `- ${m.name} (${m.role}): ${m.desc}`)
      .join("\n");

    const modeInstruction = {
      short: "כל דמות עונה במשפט אחד-שניים לכל היותר. קצר וקולע.",
      normal: "כל דמות עונה ב-2-3 משפטים. טבעי וסגנון וואטסאפ.",
      deep: "כל דמות עונה ב-3-5 משפטים עם פרטים. מעורב ומפורט."
    }[mode];

    const history = messages.slice(-10)
      .map(m => m.role === "user" ? `[אני]: ${m.text}` : `[${m.sender}]: ${m.text}`)
      .join("\n");

    const systemPrompt = `אתה מדמה שיחת ווטסאפ משפחתית ישראלית אמיתית.

בני המשפחה הפעילים:
${membersDesc}

${history ? `היסטוריית שיחה:\n${history}\n` : ""}

כללים:
- כל דמות מחוייבת לאישיותה המדויקת - אל תסטה ולו מעט
- הם מגיבים גם אחד לשני, לא רק לשולח - שיחה אמיתית
- ${modeInstruction}
- עברית מדוברת, לא ספרותית
- שפה נקייה ומכובדת בלבד
- אפשר אמוג'י במינון נכון לפי אישיות הדמות
- כל דמות מדברת בקול ייחודי שלה לחלוטין

סדר הדמויות צריך להיות טבעי - כמו שיחה אמיתית. ענה תמיד במבנה המבוקש.`;

    const apiKey = ""; // API key is populated automatically in this environment
    const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;

    const payload = {
      contents: [{ parts: [{ text }] }],
      systemInstruction: { parts: [{ text: systemPrompt }] },
      generationConfig: {
        responseMimeType: "application/json",
        responseSchema: {
          type: "OBJECT",
          properties: {
            responses: {
              type: "ARRAY",
              items: {
                type: "OBJECT",
                properties: {
                  name: { type: "STRING", description: "שם הדמות שמדברת" },
                  text: { type: "STRING", description: "תוכן ההודעה" }
                },
                required: ["name", "text"]
              }
            }
          },
          required: ["responses"]
        }
      }
    };

    try {
      const data = await fetchWithRetry(url, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload)
      });

      let responses = [];
      try {
        const resultText = data.candidates?.[0]?.content?.parts?.[0]?.text || "{}";
        const parsed = JSON.parse(resultText);
        responses = parsed.responses || [];
      } catch (e) {
        console.error("Failed to parse response:", e);
        responses = [];
      }

      setLoading(false);

      for (const resp of responses) {
        if (abortRef.current) break;

        const member = activeMembers.find(m => m.name === resp.name || resp.name?.includes(m.name));
        if (!member || !resp.text) continue;

        setTypingMember(member);

        const delay = Math.min(Math.max(resp.text.length * 28, 700), mode === "short" ? 1500 : mode === "deep" ? 3500 : 2500);
        await sleep(delay);

        if (abortRef.current) break;

        setTypingMember(null);
        await sleep(80);

        setMessages(prev => [...prev, {
          role: "bot",
          sender: member.name,
          text: resp.text,
          color: member.color,
          gender: member.gender,
          id: Date.now() + Math.random()
        }]);

        await sleep(350);
      }

    } catch (e) {
      console.error(e);
      setLoading(false);
      setMessages(prev => [...prev, {
        role: "bot", sender: "מערכת",
        text: "שגיאה בחיבור. נסה שוב.", color: "#888", id: Date.now()
      }]);
    } finally {
      setLoading(false);
      setTypingMember(null);
    }
  };

  const handleKey = e => {
    if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); }
  };

  // Group consecutive messages from same sender
  const processedMessages = messages.map((msg, i) => ({
    ...msg,
    showSender: i === 0 || messages[i-1].sender !== msg.sender || messages[i-1].role !== msg.role
  }));

  const isProcessing = loading || typingMember !== null;

  return (
    <div dir="rtl" style={{
      display: "flex", flexDirection: "column", height: "100vh",
      background: "#f0f2f5",
      fontFamily: "'Segoe UI', system-ui, -apple-system, sans-serif"
    }}>

      {/* Header */}
      <div style={{
        background: "#128C7E",
        padding: "10px 16px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        boxShadow: "0 2px 6px rgba(0,0,0,0.2)",
        zIndex: 10
      }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{
            width: 40, height: 40, borderRadius: "50%",
            background: "#075E54",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 20
          }}>👨‍👩‍👧‍👦</div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 600, color: "#fff" }}>קבוצת המשפחה</div>
            <div style={{ fontSize: 12, color: "rgba(255,255,255,0.75)", marginTop: 1 }}>
              {selected.length} משתתפים
              {typingMember && <span> · <span style={{ color: "#d9fdd3" }}>{typingMember.name} {typingMember.gender === "f" ? "מקלידה" : "מקליד"}...</span></span>}
            </div>
          </div>
        </div>
        <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
          {members.filter(m => selected.includes(m.id)).slice(0, 6).map(m => (
            <Avatar key={m.id} name={m.name} color="#fff" size={28} />
          ))}
        </div>
      </div>

      <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>

        {/* Sidebar */}
        <div style={{
          width: 255, background: "#fff",
          borderLeft: "1px solid #e9edef",
          display: "flex", flexDirection: "column",
          overflowY: "auto", flexShrink: 0
        }}>
          <div style={{
            padding: "14px 16px 8px",
            fontSize: 11, fontWeight: 700, color: "#8696a0",
            letterSpacing: "0.8px", textTransform: "uppercase"
          }}>בני המשפחה</div>

          {members.map(m => {
            const isSel = selected.includes(m.id);
            const isCustom = !defaultMembers.find(d => d.id === m.id);
            return (
              <div key={m.id} onClick={() => toggle(m.id)} style={{
                display: "flex", alignItems: "center", gap: 10,
                padding: "9px 14px",
                cursor: "pointer",
                background: isSel ? m.color + "12" : "transparent",
                borderRight: isSel ? `3px solid ${m.color}` : "3px solid transparent",
                transition: "all 0.15s ease",
                position: "relative"
              }}>
                <Avatar name={m.name} color={isSel ? m.color : "#bbb"} size={36} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 14, fontWeight: isSel ? 600 : 500,
                    color: isSel ? "#111b21" : "#3b4a54",
                    overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
                  }}>{m.name}</div>
                  <div style={{
                    fontSize: 11.5, color: "#8696a0", marginTop: 1,
                    overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap"
                  }}>{m.role}</div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
                  {isSel && <CheckCircle2 size={15} color={m.color} />}
                  {isCustom && (
                    <button onClick={e => removeMember(m.id, e)} style={{
                      background: "none", border: "none", cursor: "pointer",
                      padding: "2px 4px", color: "#ccc", borderRadius: "50%",
                      display: "flex", transition: "color 0.15s"
                    }} onMouseEnter={e => e.currentTarget.style.color = "#f44"} onMouseLeave={e => e.currentTarget.style.color = "#ccc"}>
                      <X size={13} />
                    </button>
                  )}
                </div>
              </div>
            );
          })}

          <button onClick={() => setShowAddModal(true)} style={{
            margin: "12px", padding: "9px 12px",
            borderRadius: "8px", border: "1.5px dashed #d1d7db",
            background: "#f8f9fa", cursor: "pointer",
            display: "flex", alignItems: "center", justifyContent: "center",
            gap: 7, color: "#54656f", fontSize: 13, fontWeight: 500,
            transition: "all 0.15s"
          }}
            onMouseEnter={e => { e.currentTarget.style.background = "#f0f2f5"; e.currentTarget.style.borderColor = "#aaa"; }}
            onMouseLeave={e => { e.currentTarget.style.background = "#f8f9fa"; e.currentTarget.style.borderColor = "#d1d7db"; }}>
            <Plus size={14} /> הוספת בן משפחה
          </button>
        </div>

        {/* Chat Area */}
        <div style={{
          flex: 1, display: "flex", flexDirection: "column", overflow: "hidden",
          background: "#e5ddd5",
          backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4b8ae' fill-opacity='0.18'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
        }}>

          {/* Messages */}
          <div style={{ flex: 1, overflowY: "auto", padding: "16px 24px", display: "flex", flexDirection: "column", gap: 3 }}>

            {messages.length === 0 && !isProcessing && (
              <div style={{
                textAlign: "center", marginTop: "18vh",
                background: "rgba(255,255,255,0.85)",
                padding: "20px 28px", borderRadius: "14px",
                alignSelf: "center", boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
                backdropFilter: "blur(4px)"
              }}>
                <div style={{ fontSize: 42, marginBottom: 10 }}>💬</div>
                <div style={{ fontWeight: 600, color: "#111b21", fontSize: 15 }}>התחל שיחה עם המשפחה</div>
                <div style={{ fontSize: 12.5, color: "#667781", marginTop: 5 }}>בחר משתתפים מימין ושלח הודעה</div>
              </div>
            )}

            {processedMessages.map((msg, i) => (
              <div key={msg.id} style={{ marginTop: msg.showSender && i > 0 && msg.role !== "user" ? 8 : 2 }}>
                <MessageBubble msg={msg} showSender={msg.showSender} />
              </div>
            ))}

            {typingMember && (
              <div style={{ marginTop: 6 }}>
                <TypingBubble member={typingMember} />
              </div>
            )}

            <div ref={bottomRef} />
          </div>

          {/* Input bar */}
          <div style={{
            padding: "8px 12px 10px",
            background: "#f0f2f5",
            borderTop: "1px solid #e0e0e0"
          }}>
            {/* Mode selector */}
            <div style={{
              display: "flex", gap: 6, marginBottom: 8, justifyContent: "flex-end"
            }}>
              {MODES.map(m => (
                <button key={m.id} onClick={() => setMode(m.id)} title={m.desc} style={{
                  padding: "4px 11px",
                  borderRadius: "20px",
                  border: `1.5px solid ${mode === m.id ? "#128C7E" : "#d1d7db"}`,
                  background: mode === m.id ? "#128C7E" : "#fff",
                  color: mode === m.id ? "#fff" : "#54656f",
                  fontSize: 12.5, fontWeight: 500, cursor: "pointer",
                  display: "flex", alignItems: "center", gap: 4,
                  transition: "all 0.15s"
                }}>
                  <span>{m.emoji}</span> {m.label}
                </button>
              ))}
            </div>

            {selected.length === 0 ? (
              <div style={{
                textAlign: "center", color: "#8696a0", fontSize: 13,
                padding: "12px 0"
              }}>יש לבחור לפחות בן משפחה אחד</div>
            ) : (
              <div style={{ display: "flex", gap: 10, alignItems: "flex-end" }}>
                <textarea
                  ref={textareaRef}
                  value={input}
                  onChange={e => setInput(e.target.value)}
                  onKeyDown={handleKey}
                  placeholder="הקלד הודעה..."
                  rows={1}
                  style={{
                    flex: 1, padding: "11px 15px",
                    borderRadius: "24px", border: "none",
                    background: "#fff", fontSize: 14.5,
                    outline: "none", color: "#111b21",
                    resize: "none", lineHeight: 1.45,
                    boxShadow: "0 1px 2px rgba(0,0,0,0.06)",
                    maxHeight: 100, overflowY: "auto",
                    fontFamily: "inherit"
                  }}
                />
                <button
                  onClick={sendMessage}
                  disabled={!input.trim() || isProcessing}
                  style={{
                    width: 46, height: 46, borderRadius: "50%", flexShrink: 0,
                    background: input.trim() && !isProcessing ? "#128C7E" : "#e9edef",
                    border: "none",
                    cursor: input.trim() && !isProcessing ? "pointer" : "default",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    transition: "all 0.2s",
                    boxShadow: input.trim() && !isProcessing ? "0 2px 6px rgba(18,140,126,0.35)" : "none"
                  }}>
                  <Send size={19}
                    color={input.trim() && !isProcessing ? "#fff" : "#8696a0"}
                    style={{ transform: "scaleX(-1)", marginLeft: 2 }}
                  />
                </button>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* Add member modal */}
      {showAddModal && (
        <div style={{
          position: "fixed", inset: 0,
          background: "rgba(11,20,26,0.55)",
          display: "flex", alignItems: "center", justifyContent: "center",
          zIndex: 200, padding: 16,
          backdropFilter: "blur(2px)"
        }}>
          <div style={{
            background: "#fff", borderRadius: "16px",
            padding: 28, width: "100%", maxWidth: 400,
            boxShadow: "0 16px 40px rgba(0,0,0,0.2)",
            animation: "slideIn 0.2s ease-out"
          }}>
            <div style={{
              display: "flex", justifyContent: "space-between",
              alignItems: "center", marginBottom: 22
            }}>
              <div style={{ fontSize: 17, fontWeight: 700, color: "#111b21" }}>בן משפחה חדש</div>
              <button onClick={() => setShowAddModal(false)} style={{
                background: "none", border: "none", cursor: "pointer",
                color: "#8696a0", padding: 6, borderRadius: "50%",
                display: "flex", transition: "background 0.15s"
              }} onMouseEnter={e => e.currentTarget.style.background = "#f0f2f5"}
                onMouseLeave={e => e.currentTarget.style.background = "none"}>
                <X size={18} />
              </button>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                { label: "שם *", value: newName, set: setNewName, ph: "לדוגמה: רחל" },
                { label: "תפקיד במשפחה", value: newRole, set: setNewRole, ph: "דודה, אחות, בן דוד..." },
              ].map(f => (
                <div key={f.label}>
                  <label style={{ fontSize: 12.5, fontWeight: 600, color: "#3b4a54", display: "block", marginBottom: 5 }}>{f.label}</label>
                  <input value={f.value} onChange={e => f.set(e.target.value)} placeholder={f.ph}
                    style={{
                      width: "100%", padding: "10px 12px",
                      borderRadius: "8px", border: "1.5px solid #d1d7db",
                      background: "#f0f2f5", fontSize: 14, outline: "none",
                      color: "#111b21", boxSizing: "border-box",
                      fontFamily: "inherit", transition: "border-color 0.15s"
                    }}
                    onFocus={e => e.target.style.borderColor = "#128C7E"}
                    onBlur={e => e.target.style.borderColor = "#d1d7db"}
                  />
                </div>
              ))}

              <div>
                <label style={{ fontSize: 12.5, fontWeight: 600, color: "#3b4a54", display: "block", marginBottom: 5 }}>תיאור אישיות</label>
                <textarea value={newDesc} onChange={e => setNewDesc(e.target.value)}
                  placeholder="אישיות, סגנון דיבור, מה מיוחד בו/ה..."
                  rows={3} style={{
                    width: "100%", padding: "10px 12px",
                    borderRadius: "8px", border: "1.5px solid #d1d7db",
                    background: "#f0f2f5", fontSize: 14, outline: "none",
                    color: "#111b21", resize: "none", boxSizing: "border-box",
                    fontFamily: "inherit", transition: "border-color 0.15s"
                  }}
                  onFocus={e => e.target.style.borderColor = "#128C7E"}
                  onBlur={e => e.target.style.borderColor = "#d1d7db"}
                />
              </div>

              <div>
                <label style={{ fontSize: 12.5, fontWeight: 600, color: "#3b4a54", display: "block", marginBottom: 7 }}>מין</label>
                <div style={{ display: "flex", gap: 8 }}>
                  {[{ v: "m", l: "זכר ♂" }, { v: "f", l: "נקבה ♀" }].map(g => (
                    <button key={g.v} onClick={() => setNewGender(g.v)} style={{
                      flex: 1, padding: "9px",
                      borderRadius: "8px",
                      border: `1.5px solid ${newGender === g.v ? "#128C7E" : "#d1d7db"}`,
                      background: newGender === g.v ? "#e8f5f4" : "#f0f2f5",
                      color: newGender === g.v ? "#128C7E" : "#54656f",
                      fontSize: 13.5, fontWeight: newGender === g.v ? 600 : 400,
                      cursor: "pointer", transition: "all 0.15s"
                    }}>{g.l}</button>
                  ))}
                </div>
              </div>

              <button onClick={addMember} disabled={!newName.trim()} style={{
                padding: "12px", borderRadius: "28px", border: "none",
                background: newName.trim() ? "#128C7E" : "#e9edef",
                color: newName.trim() ? "#fff" : "#8696a0",
                fontSize: 15, fontWeight: 600,
                cursor: newName.trim() ? "pointer" : "default",
                marginTop: 6, transition: "all 0.2s",
                boxShadow: newName.trim() ? "0 2px 8px rgba(18,140,126,0.3)" : "none"
              }}>
                הוסף לקבוצה
              </button>
            </div>
          </div>
        </div>
      )}

      <style>{`
        @keyframes bounce {
          0%, 60%, 100% { transform: translateY(0); }
          30% { transform: translateY(-5px); }
        }
        @keyframes slideIn {
          from { opacity: 0; transform: translateY(6px); }
          to { opacity: 1; transform: translateY(0); }
        }
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #c4b8ae; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #8696a0; }
        * { box-sizing: border-box; }
      `}</style>
    </div>
  );
}

פשוט תשלחו את הקוד, ותכתבו "תהפוך לי את זה לאפליקציה שיתופית"

בגדול הוא אמור ליצור כבר את זה, עכשיו זה החלק היותר רלוונטי למי שמחפש דמויות ממש ספציפיות

תשנו בקנבס למצב קוד, ותשנו "שם לדמות" או תסיפו שורה כזאת במקביל ותוסיף לבד תיאור \ שם

וזהו תשמרו, ותשתפו

@אברהם-גלסר אני לא יודע, אבל בפלואו, שבוע לפני ששינו עיצוב באתר, לקח הרבה זמן לטעינת התמונה..
נכון שלא מתאים לחברה בכזאת גודל לעשות כאלה שטויות ליחצנות.. אבל ככה זה מריח לי (תחושת בטן..)

@SHIMI-0 יחצנות...

@חובבן-מקצועי כתב בבאג | מה זה בג'ימיני:

[לאחרונה יש לו באגים, וזה סימן ששמתי לב אליו בפעמים הקודמות - שאומר שאמור לצאת מודל חדש..]

Spoiler

@י.-פל. כתב בבעיה | שיתוף gem (ג׳מיני): איך?:

אגב, בנטפרי אפשר בכלל להכנס לgem's?

לפי מה שידוע לי - לא

גם אם נכנסים, הוא לא מקשיב להוראות של הג'אמ, ויענה לך דרך הג'אמ של נטפרי

@yehokarpel אממממ תלוי איזה סגנון אתה מחפש.....

קלאוד עובר לאוטומט: הכירו את Routines

אנתרופיק הוסיפה ל-Claude Code פיצ'ר שנותן לו לרוץ לבד ברקע.

Spoiler

@י.ר.ק הרבה הסתבכו עם זה... ובעיקר עם השיתוף של זה

Spoiler

אם זה מעניין משהו (אני רואה שכולם מצליחים) אני יתן מדריך איך ליצור כזה צאט בג'ימיני, כולל בחירת דמויות וכו

אם יהיה ביקוש אני יעלה מדריך

@yehokarpel היה אתר כזה על התמונות של ג'ימיני לפני סדרת המודלים "ננו בננה" אולי תבדוק עם עדכנו שם... לא מוצא קישור לאתר הזה

טיפה ערכתי עוד את האתר. אם יש למשהו הערות, אני אשמח לשמוע

@למדנ איזה תשובה?? תסביר.. אני בחיים לא ראיתי שליחת קבצים מג'ימיני למייל (לא בעסקי, ולא בפרו בג'ימיני)

@למדנ לא קשור לעסקי (יש לי ואין שם אופציה של שליחת קבצים במייל.. זה נשמע לי חירטוט)

ממש מגניב.. רק שאלה זה על מצב "פרו"? מעמיק? או זריז

@דוד-33 כתב בהמלצה | אתר גלריית אומנות של יצירות AI:

אז איפה כן ניתן לשלוח אחרי שהקבוצה בצ'אט גוגל פחות פעילה?
יש קבוצה אחרת פעילה?

יש אבל אני לא חושב שמצרפים לשם מיילים חדשים... (גם מגבלת נטפרי)

גוגל קלאוד מפרסמת מדריכים ו-Use Cases.
איך הם משדרגים את העסק? הנה 6 דרכים מרכזיות:
️ חיפוש במידע הארגוני בלי להתאמץ. במקום לנבור ב-Slack, במיילים או ב-PDFים ישנים, הסוכן סורק את כל הדאטה של החברה ומוצא תשובה מדויקת בשנייה.
️ איתור ותיקון באגים בקוד. הקטע החזק: הוא לא רק מוצא את הטעות, אלא גם כותב את הפתרון ומגיש אותו. זה אומר שצוות הפיתוח יכול להתמקד ביצירה ולא בתיקונים.
️ סיעור מוחות בטורבו. מעכשיו אפשר לייצר רעיונות לקמפיינים או כיוונים למוצרים חדשים תוך דקות, במקום ישיבות מתישות של שעות.
️ ייעוץ מומחה צמוד 24/7. צריכים חוות דעת משפטית ראשונית או ניתוח פיננסי? הסוכן מתנהג כמו מומחה שמכיר את כל הרגולציה והנתונים שלכם.
️ קיצור מחזור המכירה. הסוכן יודע לנהל לידים, לענות על שאלות טכניות מורכבות ולחמם את הלקוח עד לרגע הסגירה באופן אוטונומי לחלוטין.
️ פרסונליזציה ב-Scale. לתת למיליון לקוחות את התחושה שהם היחידים בעולם. הסוכן מתאים את המענה והחוויה בדיוק לצרכים של כל משתמש בזמן אמת.
מה עוד אפשר לעשות איתם?
מעבר לרשימה הזו, הסוכנים מתחילים להיכנס לעומק האופרציה.
ניהול שרשרת אספקה. סוכנים שיודעים לעקוב אחרי משלוחים, לזהות עיכובים בגלל מזג אוויר ולמצוא ספקים חלופיים לבד.
אונבורדינג אוטומטי. סוכן HR שמלווה עובד חדש מהרגע הראשון, עונה על שאלות "איך עושים מה" ומגדיר לו הרשאות במערכות בלי שאף אחד יתערב.
המעבר מ-AI שעונה ל-AI שעובד הוא טירוף. זה הופך כל עסק קטן לארגון עם יכולות של תאגיד, וכל מנהל למנצח על תזמורת של סוכנים דיגיטליים.