WebSim Project Creator

Enter your project description and let AI generate your web project

Generating your project...

Source Code


      

    

  


  
') ||
			!code.includes('/g) || []).length ||
			(code.match(/{/g) || []).length !== (code.match(/}/g) || []).length;

		if (needsCompletion && !attemptedCompletion) {
			attemptedCompletion = true;
			try {
				const completion = await fetch('https://gen.pollinations.ai/text/', {
					method: 'POST',
					headers: { 'Content-Type': 'application/json' },
					body: JSON.stringify({
						messages: [{
							role: "user",
							content: `CONTEXT: Complete this HTML code and add any missing parts.
							Current code: ${currentCode}
							Requirements: 
							1. Complete all open tags and functions
							2. Ensure all script blocks are complete
							3. Keep all existing functionality
							4. Only add what's missing to complete the code
							OUTPUT: Complete valid HTML only, no explanations.`
						}],
						max_tokens: 4000,
						model: 'openai'
					})
				});

				const completedCode = await completion.text();
				return extractCode(completedCode);
			} catch (error) {
				console.error('Completion error:', error);
				return currentCode; // Return original code if completion fails
			}
		}

		return currentCode;
	}

    function extractCode(response) {
      let code = response;
      if (code.includes('```html')) {
        code = code.split('```html')[1].split('```')[0].trim();
      } else if (code.includes('```')) {
        code = code.split('```')[1].split('```')[0].trim();
      }
      return code;
    }

	async function generateProject() {
		const prompt = document.getElementById('prompt').value;
		if (!prompt) {
			alert('Please enter a project description');
			return;
		}

		document.getElementById('error').style.display = 'none';
		document.getElementById('loading').style.display = 'block';
		document.getElementById('projectView').style.display = 'block';

		try {
			const response = await fetch('https://gen.pollinations.ai/text/', {
				method: 'POST',
				headers: { 'Content-Type': 'application/json' },
				body: JSON.stringify({
					messages: [{
						role: "user",
						content: `CONTEXT: Create a complete web project. ${API_CONTEXT}\n\nUSER: ${prompt}`
					}],
					max_tokens: 4000,
					model: 'openai'
				})
			});

			if (!response.ok) {
				throw new Error('API response was not ok');
			}

			const result = await response.text();
			let code = extractCode(result);

			// Simple completion check and fix
			if (!code.includes('') || !code.includes('')) {
				code = `
					
					
						
						Generated Project
					

					
						${code}
					
					`;
			}

			if (code.includes('pollinations.ai')) {
				const seed = Math.floor(Math.random() * 1000000);
				code = code.replace(/(?:text|image)\.pollinations\.ai\/([^?\s"']+)/g, 
					(match, query) => `${match}?seed=${seed}`);
			}

			currentCode = code;
			document.getElementById('preview').srcdoc = code;
			document.getElementById('codeText').textContent = code;
			document.getElementById('codeText').style.visibility = 'visible';
			document.getElementById('loading').style.display = 'none';

		} catch (error) {
			console.error('Error:', error);
			document.getElementById('error').textContent = 'An error occurred while generating the project. Please try again.';
			document.getElementById('error').style.display = 'block';
			document.getElementById('loading').style.display = 'none';
		}
	}
	
    async function modifyProject() {
      const modifyPrompt = document.getElementById('modifyPrompt').value;
      if (!modifyPrompt) return;

      document.getElementById('loading').style.display = 'block';

      try {
        const response = await fetch('https://gen.pollinations.ai/text/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            messages: [{
              role: "user",
              content: `CONTEXT: Modify this web project. ${API_CONTEXT}\n\nCurrent code: ${currentCode}\n\nUSER: ${modifyPrompt}`
            }],
            max_tokens: 4000,
            model: 'openai',
            stream: true
          })
        });

        if (!response.body) {
          throw new Error('Response body is empty');
        }

        const reader = response.body.getReader();
        let chunks = [];
        let code = '';
        
        while (true) {
          const {done, value} = await reader.read();
          if (done) break;
          const chunk = new TextDecoder().decode(value);
          chunks.push(chunk);
        }

        code = extractCode(chunks.join(''));
        code = await verifyAndCompleteCode(code);

        if (code.includes('pollinations.ai')) {
          const seed = Math.floor(Math.random() * 1000000);
          code = code.replace(/(?:text|image)\.pollinations\.ai\/([^?\s"']+)/g, 
            (match, query) => `${match}?seed=${seed}`);
        }

        currentCode = code;
        document.getElementById('preview').srcdoc = code;
        document.getElementById('codeText').textContent = code;
        document.getElementById('modifyPrompt').value = '';
        document.getElementById('loading').style.display = 'none';

      } catch (error) {
        console.error('Error:', error);
        document.getElementById('loading').style.display = 'none';
      }
    }

    function handleModifyInput(event) {
      if (event.key === 'Enter') {
        modifyProject();
      }
    }

	function toggleCodePanel() {
		const codePanel = document.getElementById('codePanel');
		const codeText = document.getElementById('codeText');
		if (codePanel.style.right === '0px') {
			codePanel.style.right = '-50%';
		} else {
			codePanel.style.right = '0px';
			// Ensure code is displayed
			if (currentCode) {
				codeText.textContent = currentCode;
			}
		}
	}

    function downloadCode() {
      const blob = new Blob([currentCode], { type: 'text/html' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'websim-project.html';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);
    }

    function copyCode() {
      navigator.clipboard.writeText(currentCode);
      const copyBtn = document.querySelector('.code-header button');
      copyBtn.textContent = 'Copied!';
      setTimeout(() => copyBtn.textContent = 'Copy', 2000);
    }
	
function closeProject() {
      document.getElementById('projectView').style.display = 'none';
    }

    // Expose functions to window for HTML onclick handlers
    window.generateProject = generateProject;
    window.modifyProject = modifyProject;
    window.handleModifyInput = handleModifyInput;
    window.toggleCodePanel = toggleCodePanel;
    window.downloadCode = downloadCode;
    window.copyCode = copyCode;
    window.closeProject = closeProject;
    });