Faheetah · September 24, 2025 01:44
diff --git a/gistfile1.txt b/gistfile1.txt
 <?php
 // (Keep the same PHP server-side code here as before for brevity)
 // ...

 // Then HTML head etc. omitted for brevity

 ?><!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <title>Mockumentary Generator — FICTION / SATIRE</title>
 <style>
  /* Same styles as before... */
 </style>
 </head>
 <body>
 <main class="wrap">
 <!-- Same markup as before... -->
 <section class="panel" aria-labelledby="title">
  <!-- ... -->
 </section>
 <section class="panel imageWrap" aria-labelledby="previewTitle">
  <!-- ... -->
 </section>
 </main>

 <script>
 (() => {
  const genBtn = document.getElementById('genBtn');
  const downloadBtn = document.getElementById('downloadBtn');
  const toggleWM = document.getElementById('toggleWM');
  const logs = document.getElementById('logs');
  const status = document.getElementById('status');
  const placeholder = document.getElementById('placeholder');
  const imageWrapActual = document.getElementById('imageWrapActual');
  const resultImg = document.getElementById('result');
  const watermark = document.getElementById('watermark');

  // Functional recursive logger appender with limit
  const maxLogs = 50;
  const appendLog = (msgs, idx = 0) => {
    if (idx >= msgs.length) return;
    const el = document.createElement('div');
    el.textContent = `[${new Date().toLocaleTimeString()}] ${msgs[idx]}`;
    logs.prepend(el);
    // prune old logs recursively if > maxLogs
    if (logs.children.length > maxLogs) logs.removeChild(logs.lastChild);
    setTimeout(() => appendLog(msgs, idx + 1), 50);
  };

  // Functional recursive fake progress updater
  const progressMessages = [
    'contacting API…',
    'prompt being prepared…',
    'AI composing image (nostalgia mode)…',
    'finalizing image…'
  ];
  const recursiveProgress = (msgs, i = 0) => {
    if (i >= msgs.length) return;
    setStatus(msgs[i]);
    setTimeout(() => recursiveProgress(msgs, i + 1), 800);
  };

  // Helper: functional base64 to Blob (unchanged)
  const base64ToBlob = (b64, mime = 'image/png') =>
    new Blob([Uint8Array.from(atob(b64), c => c.charCodeAt(0))], { type: mime });

  // Helper: functional recursive download trigger (not recursive here because trivial)
  const downloadBase64 = (b64, filename = 'mockumentary_fiction.png') => {
    const blob = base64ToBlob(b64);
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };

  // Recursive UI state toggle helper (for watermark)
  const toggleElementDisplay = (el, isVisible) => {
    el.style.display = isVisible ? 'block' : 'none';
  };

  // Main: recursive-style async generator
  const generateImage = async () => {
    genBtn.disabled = true;
    downloadBtn.disabled = true;
    toggleWM.disabled = true;
    placeholder.style.display = 'block';
    imageWrapActual.style.display = 'none';

    logMessages([
      'User hit Generate — sending request to server (satire label included).'
    ]);
    recursiveProgress(progressMessages);

    try {
      const formData = new FormData();
      formData.append('action', 'generate');
      const response = await fetch(location.href, {
        method: 'POST',
        body: formData,
        credentials: 'same-origin'
      });

      if (!response.ok) throw new Error('Server HTTP error ' + response.status);
      const data = await response.json();
      if (!data.ok) throw new Error(data.error || 'Unknown API error');

      setStatus('rendering image…');
      logMessages(['Received image data — rendering into page.']);

      // Image load promise wrapped recursively
      const loadImage = (img, src) =>
        new Promise((resolve, reject) => {
          img.onload = () => resolve();
          img.onerror = () => reject(new Error('Image load error'));
          img.src = src;
        });

      await loadImage(resultImg, 'data:image/png;base64,' + data.b64);
      placeholder.style.display = 'none';
      imageWrapActual.style.display = 'block';
      setStatus('done');
      logMessages([
        'Image rendered. Remember: LABEL THIS CONTENT AS FICTION / SATIRE before sharing.'
      ]);
      downloadBtn.disabled = false;
      toggleWM.disabled = false;
      genBtn.disabled = false;

      // Attach download handler recursively (just assign once here)
      downloadBtn.onclick = () => {
        logMessages(['Download clicked — saving PNG.']);
        downloadBase64(data.b64);
      };

      // Watermark toggle with recursive closure state
      let watermarkVisible = true;
      toggleWM.onclick = () => {
        watermarkVisible = !watermarkVisible;
        toggleElementDisplay(watermark, watermarkVisible);
        logMessages([
          `Watermark ${watermarkVisible ? 'visible' : 'hidden'} (for distribution, keep watermark visible!).`
        ]);
      };
    } catch (error) {
      setStatus('error');
      logMessages(['Unexpected error: ' + error.message], true);
      genBtn.disabled = false;
    }
  };

  // Recursive style log message batcher with optional error flag
  const logMessages = (msgs, isError = false, idx = 0) => {
    if (idx >= msgs.length) return;
    const el = document.createElement('div');
    el.textContent = `[${new Date().toLocaleTimeString()}] ${msgs[idx]}`;
    if (isError) el.style.color = '#ffb4b4';
    logs.prepend(el);
    if (logs.children.length > 50) logs.removeChild(logs.lastChild);
    setTimeout(() => logMessages(msgs, isError, idx + 1), 50);
  };

  // Clear logs recursively
  const clearLogsRecursive = () => {
    if (logs.firstChild) {
      logs.removeChild(logs.firstChild);
      setTimeout(clearLogsRecursive, 10);
    } else {
      logMessages(['Logs cleared. lolcats mode reset.']);
    }
  };

  // Bind buttons
  genBtn.addEventListener('click', generateImage);
  document.getElementById('clearLogs').addEventListener('click', clearLogsRecursive);

  // Initial meme log lines recursive batch
  logMessages([
    'Welcome! Nostalgia mode: rickroll • dramatic_chipmunk • keyboard_cat (labels enforced).'
  ]);
 })();
 </script>
 </body>
 </html>
	<?php
	// (Keep the same PHP server-side code here as before for brevity)
	// ...

	// Then HTML head etc. omitted for brevity

	?><!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title>Mockumentary Generator — FICTION / SATIRE</title>
	<style>
	/* Same styles as before... */
	</style>
	</head>
	<body>
	<main class="wrap">
	<!-- Same markup as before... -->
	<section class="panel" aria-labelledby="title">
	<!-- ... -->
	</section>
	<section class="panel imageWrap" aria-labelledby="previewTitle">
	<!-- ... -->
	</section>
	</main>

	<script>
	(() => {
	const genBtn = document.getElementById('genBtn');
	const downloadBtn = document.getElementById('downloadBtn');
	const toggleWM = document.getElementById('toggleWM');
	const logs = document.getElementById('logs');
	const status = document.getElementById('status');
	const placeholder = document.getElementById('placeholder');
	const imageWrapActual = document.getElementById('imageWrapActual');
	const resultImg = document.getElementById('result');
	const watermark = document.getElementById('watermark');

	// Functional recursive logger appender with limit
	const maxLogs = 50;
	const appendLog = (msgs, idx = 0) => {
	if (idx >= msgs.length) return;
	const el = document.createElement('div');
	el.textContent = `[${new Date().toLocaleTimeString()}] ${msgs[idx]}`;
	logs.prepend(el);
	// prune old logs recursively if > maxLogs
	if (logs.children.length > maxLogs) logs.removeChild(logs.lastChild);
	setTimeout(() => appendLog(msgs, idx + 1), 50);
	};

	// Functional recursive fake progress updater
	const progressMessages = [
	'contacting API…',
	'prompt being prepared…',
	'AI composing image (nostalgia mode)…',
	'finalizing image…'
	];
	const recursiveProgress = (msgs, i = 0) => {
	if (i >= msgs.length) return;
	setStatus(msgs[i]);
	setTimeout(() => recursiveProgress(msgs, i + 1), 800);
	};

	// Helper: functional base64 to Blob (unchanged)
	const base64ToBlob = (b64, mime = 'image/png') =>
	new Blob([Uint8Array.from(atob(b64), c => c.charCodeAt(0))], { type: mime });

	// Helper: functional recursive download trigger (not recursive here because trivial)
	const downloadBase64 = (b64, filename = 'mockumentary_fiction.png') => {
	const blob = base64ToBlob(b64);
	const url = URL.createObjectURL(blob);
	const a = document.createElement('a');
	a.href = url;
	a.download = filename;
	document.body.appendChild(a);
	a.click();
	document.body.removeChild(a);
	URL.revokeObjectURL(url);
	};

	// Recursive UI state toggle helper (for watermark)
	const toggleElementDisplay = (el, isVisible) => {
	el.style.display = isVisible ? 'block' : 'none';
	};

	// Main: recursive-style async generator
	const generateImage = async () => {
	genBtn.disabled = true;
	downloadBtn.disabled = true;
	toggleWM.disabled = true;
	placeholder.style.display = 'block';
	imageWrapActual.style.display = 'none';

	logMessages([
	'User hit Generate — sending request to server (satire label included).'
	]);
	recursiveProgress(progressMessages);

	try {
	const formData = new FormData();
	formData.append('action', 'generate');
	const response = await fetch(location.href, {
	method: 'POST',
	body: formData,
	credentials: 'same-origin'
	});

	if (!response.ok) throw new Error('Server HTTP error ' + response.status);
	const data = await response.json();
	if (!data.ok) throw new Error(data.error \|\| 'Unknown API error');

	setStatus('rendering image…');
	logMessages(['Received image data — rendering into page.']);

	// Image load promise wrapped recursively
	const loadImage = (img, src) =>
	new Promise((resolve, reject) => {
	img.onload = () => resolve();
	img.onerror = () => reject(new Error('Image load error'));
	img.src = src;
	});

	await loadImage(resultImg, 'data:image/png;base64,' + data.b64);
	placeholder.style.display = 'none';
	imageWrapActual.style.display = 'block';
	setStatus('done');
	logMessages([
	'Image rendered. Remember: LABEL THIS CONTENT AS FICTION / SATIRE before sharing.'
	]);
	downloadBtn.disabled = false;
	toggleWM.disabled = false;
	genBtn.disabled = false;

	// Attach download handler recursively (just assign once here)
	downloadBtn.onclick = () => {
	logMessages(['Download clicked — saving PNG.']);
	downloadBase64(data.b64);
	};

	// Watermark toggle with recursive closure state
	let watermarkVisible = true;
	toggleWM.onclick = () => {
	watermarkVisible = !watermarkVisible;
	toggleElementDisplay(watermark, watermarkVisible);
	logMessages([
	`Watermark ${watermarkVisible ? 'visible' : 'hidden'} (for distribution, keep watermark visible!).`
	]);
	};
	} catch (error) {
	setStatus('error');
	logMessages(['Unexpected error: ' + error.message], true);
	genBtn.disabled = false;
	}
	};

	// Recursive style log message batcher with optional error flag
	const logMessages = (msgs, isError = false, idx = 0) => {
	if (idx >= msgs.length) return;
	const el = document.createElement('div');
	el.textContent = `[${new Date().toLocaleTimeString()}] ${msgs[idx]}`;
	if (isError) el.style.color = '#ffb4b4';
	logs.prepend(el);
	if (logs.children.length > 50) logs.removeChild(logs.lastChild);
	setTimeout(() => logMessages(msgs, isError, idx + 1), 50);
	};

	// Clear logs recursively
	const clearLogsRecursive = () => {
	if (logs.firstChild) {
	logs.removeChild(logs.firstChild);
	setTimeout(clearLogsRecursive, 10);
	} else {
	logMessages(['Logs cleared. lolcats mode reset.']);
	}
	};

	// Bind buttons
	genBtn.addEventListener('click', generateImage);
	document.getElementById('clearLogs').addEventListener('click', clearLogsRecursive);

	// Initial meme log lines recursive batch
	logMessages([
	'Welcome! Nostalgia mode: rickroll • dramatic_chipmunk • keyboard_cat (labels enforced).'
	]);
	})();
	</script>
	</body>
	</html>