victor HF Staff commited on
Commit
891e1dc
·
1 Parent(s): 22916b8

refactor: Improve AI prompt for better HTML generation and code structure

Browse files
Files changed (1) hide show
  1. src/components/ask-ai/ask-ai.tsx +23 -3
src/components/ask-ai/ask-ai.tsx CHANGED
@@ -25,10 +25,11 @@ function AskAI({
25
  const [previousPrompt, setPreviousPrompt] = useState("");
26
 
27
  const callAi = async () => {
28
- if (isAiWorking) return;
29
  setisAiWorking(true);
30
 
31
  let contentResponse = "";
 
32
  try {
33
  const request = await fetch("/api/ask-ai", {
34
  method: "POST",
@@ -64,6 +65,13 @@ function AskAI({
64
  setPreviousPrompt(prompt);
65
  setisAiWorking(false);
66
  setHasAsked(true);
 
 
 
 
 
 
 
67
  return;
68
  }
69
 
@@ -71,8 +79,20 @@ function AskAI({
71
  contentResponse += chunk;
72
  const newHtml = contentResponse.match(/<!DOCTYPE html>[\s\S]*/)?.[0];
73
  if (newHtml) {
74
- setHtml(newHtml);
75
- if (newHtml?.length > 200) {
 
 
 
 
 
 
 
 
 
 
 
 
76
  onScrollToBottom();
77
  }
78
  }
 
25
  const [previousPrompt, setPreviousPrompt] = useState("");
26
 
27
  const callAi = async () => {
28
+ if (isAiWorking || !prompt.trim()) return;
29
  setisAiWorking(true);
30
 
31
  let contentResponse = "";
32
+ let lastRenderTime = 0;
33
  try {
34
  const request = await fetch("/api/ask-ai", {
35
  method: "POST",
 
65
  setPreviousPrompt(prompt);
66
  setisAiWorking(false);
67
  setHasAsked(true);
68
+
69
+ // Now we have the complete HTML including </html>, so set it to be sure
70
+ const finalDoc = contentResponse.match(/<!DOCTYPE html>[\s\S]*<\/html>/)?.[0];
71
+ if (finalDoc) {
72
+ setHtml(finalDoc);
73
+ }
74
+
75
  return;
76
  }
77
 
 
79
  contentResponse += chunk;
80
  const newHtml = contentResponse.match(/<!DOCTYPE html>[\s\S]*/)?.[0];
81
  if (newHtml) {
82
+ // Force-close the HTML tag so the iframe doesn't render half-finished markup
83
+ let partialDoc = newHtml;
84
+ if (!partialDoc.includes("</html>")) {
85
+ partialDoc += "\n</html>";
86
+ }
87
+
88
+ // Throttle the re-renders to avoid flashing/flicker
89
+ const now = Date.now();
90
+ if (now - lastRenderTime > 300) {
91
+ setHtml(partialDoc);
92
+ lastRenderTime = now;
93
+ }
94
+
95
+ if (partialDoc.length > 200) {
96
  onScrollToBottom();
97
  }
98
  }