/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function calculateTFIDF(text, outputSize = 7) { const words = text.toLowerCase().match(/\b\w+\b/g) || []; const wordCount = words.length; const wordFreq = {}; const wordTF = {}; const wordIDF = {}; const tfidf = {}; // Calculate word frequency and TF words.forEach(word => { if (!stopwords.has(word)) { wordFreq[word] = (wordFreq[word] || 0) + 1; wordTF[word] = wordFreq[word] / wordCount; } }); // Calculate IDF Object.keys(wordFreq).forEach(word => { wordIDF[word] = Math.log(1 + 1 / wordFreq[word]); }); // Calculate TF-IDF Object.keys(wordTF).forEach(word => { tfidf[word] = wordTF[word] * wordIDF[word]; }); // Sort and return top phrases return Object.entries(tfidf) .sort((a, b) => b[1] - a[1]) .slice(0, outputSize); } function calculateWordFrequency(text, topN = 30) { const words = text.toLowerCase().match(/\b\w+\b/g) || []; const wordFreq = {}; words.forEach(word => { if (!stopwords.has(word) && isValidWord(word)) { wordFreq[word] = (wordFreq[word] || 0) + 1; } }); return Object.entries(wordFreq) .sort((a, b) => b[1] - a[1]) .slice(0, topN); } function isValidWord(word) { return word.length > 1; } const stopwords = new Set([ "a", "an", "and", "are", "as", "at", "be", "by", "for", "from", "has", "he", "in", "is", "it", "its", "of", "on", "that", "the", "to", "was", "were", "will", "with" ]); function App() { const [text, setText] = useState(""); const [tfidfResults, setTfidfResults] = useState([]); const [frequencyResults, setFrequencyResults] = useState([]); const [isLoading, setIsLoading] = useState(false); const handleSubmit = (e) => { e.preventDefault(); setIsLoading(true); const tfidf = calculateTFIDF(text); const frequency = calculateWordFrequency(text); setTfidfResults(tfidf); setFrequencyResults(frequency); setIsLoading(false); }; return (

RADICAL TEXT ANALYZER

setText(e.target.value)}
            placeholder="ENTER YOUR TOTALLY AWESOME TEXT HERE"
            rows="10"
            cols="40"
          />
          <button type="submit" disabled={isLoading}>
            {isLoading ? 'ANALYZING...' : 'ANALYZE NOW!'}
          </button>
        </form>
        <div className="results">
          <h2>TF-IDF RESULTS</h2>
          <ul>
            {tfidfResults && tfidfResults.length > 0 ? (
              tfidfResults.map(([phrase, score], index) => (
                <li key={index}>{phrase}: {score.toFixed(4)}</li>
              ))
            ) : (
              <li>No results yet. Analyze some text!</li>
            )}
          </ul>
        </div>
        <div className="results">
          <h2>WORD FREQUENCY</h2>
          <ul>
            {frequencyResults && frequencyResults.length > 0 ? (
              frequencyResults.map(([word, count], index) => (
                <li key={index}>{word}: {count}</li>
              ))
            ) : (
              <li>No results yet. Analyze some text!</li>
            )}
          </ul>
        </div>
      </div>
      <div className="decorations">
        <img src="https://maxm-imggenurl.web.val.run/a-90s-style-animated-gif-of-a-spinning-globe" alt="Spinning Globe" className="spinning-globe" />
        <img src="https://maxm-imggenurl.web.val.run/a-90s-style-animated-gif-of-a-construction-worker" alt="Under Construction" className="under-construction" />
      </div>
    </div>
  );
}

function client() {
  createRoot(document.getElementById("root")).render(<App />);
}

if (typeof document !== "undefined") {
  client();
}

export default async function(request: Request): Promise<Response> {
  return new Response(`
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Radical 90s Text Analyzer</title>
      <link href="https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap" rel="stylesheet">
      <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, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Comic Neue', cursive;
    background: #FF00FF;
    color: #FFFF00;
    overflow-x: hidden;
  }

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: #00FFFF;
    border: 5px solid #FF0000;
    box-shadow: 10px 10px 0 #000000;
  }

.title {
    font-size: 36px;
    color: #FF0000;
    text-shadow: 2px 2px #FFFF00;
    background: #00FF00;
    padding: 10px;
  }

.content {
    background: #FFFFFF;
    padding: 20px;
    border: 3px dashed #FF00FF;
    margin-top: 20px;
  }

textarea {
    width: 100%;
    background-color: #FFFF00;
    color: #000000;
    border: 2px solid #FF0000;
    padding: 10px;
    font-family: 'Comic Neue', cursive;
    font-size: 16px;
  }

button {
    display: block;
    width: 100%;
    background-color: #FF0000;
    color: #FFFFFF;
    border: none;
    padding: 10px;
    margin-top: 10px;
    font-family: 'Comic Neue', cursive;
    font-size: 18px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 5px 5px 0 #000000;
  }

button:hover {
    background-color: #FF6600;
  }

h2 {
    color: #FF00FF;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px #000000;
  }

ul {
    list-style-type: none;
    padding: 0;
  }

li {
    margin-bottom: 5px;
    background: #FFFF00;
    color: #000000;
    padding: 5px;
    border: 1px solid #FF0000;
  }

.results {
    margin-top: 20px;
    border: 2px solid #00FF00;
    padding: 10px;
    background: #FF99CC;
  }

.decorations {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
  }

.spinning-globe, .under-construction {
    width: 100px;
    height: 100px;
    margin: 10px;
  }

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
  }

.blink {
    animation: blink 1s linear infinite;
  }
`;</article></body></html>

sanguineCyanMastodon