/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [dream, setDream] = useState(""); const [interpretation, setInterpretation] = useState(""); const [loading, setLoading] = useState(false); const interpretDream = async () => { if (!dream.trim()) return; setLoading(true); setInterpretation(""); try { const response = await fetch("/interpret", { method: "POST", body: JSON.stringify({ dream }), headers: { "Content-Type": "application/json" } }); const result = await response.text(); setInterpretation(result); } catch (error) { setInterpretation("حدث خطأ أثناء تفسير الحلم. يرجى المحاولة مرة أخرى."); } finally { setLoading(false); } }; return (

🌙 مفسر الأحلام

setDream(e.target.value)}
        rows={6}
      />
      <button onClick={interpretDream} disabled={loading}>
        {loading ? "جارٍ التفسير..." : "فسّر حلمي"}
      </button>
      {interpretation && (
        <div className="interpretation">
          <h2>تفسير الحلم:</h2>
          <p>{interpretation}</p>
        </div>
      )}
      <footer>
        <a 
          href={import.meta.url.replace("esm.town", "val.town")} 
          target="_top"
          style={{ color: '#888', fontSize: '0.8em' }}
        >
          عرض المصدر
        </a>
      </footer>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }

export default async function server(request: Request): Promise<Response> {
  if (request.method === "POST" && new URL(request.url).pathname === "/interpret") {
    const { OpenAI } = await import("https://esm.town/v/std/openai");
    const openai = new OpenAI();
    
    const { dream } = await request.json();
    
    try {
      const completion = await openai.chat.completions.create({
        messages: [
          { 
            role: "system", 
            content: "أنت مفسر أحلام عربي خبير. قم بتفسير الأحلام بشكل عميق وثقافي مع مراعاة السياق الإسلامي والعربي." 
          },
          { 
            role: "user", 
            content: `يرجى تفسير هذا الحلم بشكل مفصل ودقيق: ${dream}` 
          }
        ],
        model: "gpt-4o-mini",
        max_tokens: 300,
      });
      
      return new Response(
        completion.choices[0].message.content || "لم يتم العثور على تفسير",
        { headers: { "Content-Type": "text/plain" } }
      );
    } catch (error) {
      return new Response("حدث خطأ أثناء تفسير الحلم", { status: 500 });
    }
  }
  
  return new Response(`
    <html>
      <head>
        <title>مفسر الأحلام</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>${css}</style>
      </head>
      <body>
        <div id="root"></div>
        <script src="https://esm.town/v/std/catch"></script>
        <script type="module" src="${import.meta.url}"></script>
      </body>
    </html>
  `, {
    headers: { "Content-Type": "text/html" }
  });
}

const css = `
body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  padding: 20px;
  direction: rtl;
  line-height: 1.6;
  color: #333;
}

.dream-interpreter {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

h1 {
  text-align: center;
  color: #5a5a5a;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 5px;
  resize: vertical;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.interpretation {
  margin-top: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

footer {
  text-align: center;
  margin-top: 20px;
}
`;</article></body></html>

dreamInterpreterApp