Page Detector

\n setUrl(e.target.value)}\n placeholder=\"Enter a URL\"\n required\n />\n \n \n {result && (\n <>\n

{getDomainPreview(result.url, result.pageTitle)}

\n \n

Images: {result.imageCount} (Estimated size: {result.estimatedImageSize.toFixed(2)} GB)

Videos: {result.videoCount} (Estimated size: {result.estimatedVideoSize.toFixed(2)} GB)

Total Estimated Size: {result.totalEstimatedSize.toFixed(2)} GB

Performance Metrics

CDN/Cloud Usage: {result.cdnUsage.length > 0 ? result.cdnUsage.join(\", \") : \"Not detected\"}

Estimated FCP: {result.estimatedFCP} ms

Latency: {result.latency.toFixed(2)} ms

Availability: {result.availability}

\n {showImageList && }\n {showVideoList && }\n

\n Page HTML {showFullHtml ? 'Full View' : 'Preview'}\n \n

\n              \n

\n

\n        \n      )}\n      \n        View source on Val Town\n      
\n

\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n  client();\n}\n\nexport default async function server(request: Request): Promise {\n  const url = new URL(request.url).searchParams.get(\"url\");\n\n  if (url) {\n    try {\n      const startTime = performance.now();\n      const response = await fetch(url);\n      const endTime = performance.now();\n      const pageContent = await response.text();\n      \n      // Image detection\n      const imageRegex = /]+src\\s*=\\s*['\"]([^'\"]+)['\"][^>]*>|background-image:\\s*url\\(['\"]?([^'\"]+)['\"]?\\)/gi;\n      const imageMatches = [...pageContent.matchAll(imageRegex)];\n      const imageList = await Promise.all(imageMatches.map(async match => {\n        const imgUrl = new URL(match[1] || match[2], url).href;\n        try {\n          const imgResponse = await fetch(imgUrl);\n          const size = parseInt(imgResponse.headers.get('content-length') || '0') / 1024; // size in KB\n          return { url: imgUrl, size: size.toFixed(2) };\n        } catch (error) {\n          console.error(`Failed to fetch image: ${imgUrl}`, error);\n          return { url: imgUrl, size: '0.00' };\n        }\n      }));\n      const imageCount = imageList.length;\n\n      // Improved video detection and size estimation\n      const videoRegex = /]*>|]*(?:youtube\\.com|vimeo\\.com)[^>]*>|]+type\\s*=\\s*['\"]video\\/[^'\"]+['\"][^>]*>/gi;\n      const videoMatches = [...pageContent.matchAll(videoRegex)];\n      const videoList = videoMatches.map(match => {\n        const videoUrl = match[0].match(/src\\s*=\\s*['\"]([^'\"]+)['\"]/i);\n        const durationMatch = match[0].match(/duration\\s*=\\s*['\"]?(\\d+)['\"]?/i);\n        let duration = durationMatch ? parseInt(durationMatch[1]) : 300; // Default to 5 minutes if not specified\n        \n        // Estimate video size based on duration and assumed quality\n        // Assuming 1080p quality at 5 Mbps bitrate\n        const bitrate = 5 * 1024 * 1024; // 5 Mbps in bits\n        const estimatedSize = (bitrate * duration) / 8 / 1024 / 1024 / 1024; // Convert to GB\n        \n        return {\n          url: videoUrl ? new URL(videoUrl[1], url).href : 'Unknown',\n          size: estimatedSize\n        };\n      });\n      const videoCount = videoList.length;\n      \n      const estimatedImageSize = imageList.reduce((total, img) => total + parseFloat(img.size), 0) / 1024; // Convert KB to GB\n      const estimatedVideoSize = videoList.reduce((total, video) => total + video.size, 0);\n      const totalEstimatedSize = estimatedImageSize + estimatedVideoSize;\n\n      // Extract page title\n      const titleMatch = pageContent.match(/]*>([^<]+)<\\/title>/i);\n      const pageTitle = titleMatch ? titleMatch[1].trim() : \"No title found\";\n\n      // Improved CDN and cloud service detection\n      const cdnCloudProviders = [\n        { name: \"Cloudflare\", regex: /cloudflare/i, headerRegex: /^cf-/i },\n        { name: \"Amazon CloudFront\", regex: /cloudfront\\.net/i, headerRegex: /^x-amz-cf-/i },\n        { name: \"Akamai\", regex: /akamai/i, headerRegex: /^akamai-/i },\n        { name: \"Fastly\", regex: /fastly/i, headerRegex: /^fastly-/i },\n        { name: \"Google Cloud CDN\", regex: /googleusercontent\\.com/i, headerRegex: /^x-goog-/i },\n        { name: \"Microsoft Azure CDN\", regex: /azureedge\\.net/i, headerRegex: /^x-msedge-/i },\n        { name: \"StackPath\", regex: /stackpath/i, headerRegex: /^x-sp-/i },\n        { name: \"Imperva\", regex: /imperva/i, headerRegex: /^x-iinfo/i },\n        { name: \"Limelight\", regex: /limelight/i, headerRegex: /^x-ll-/i },\n        { name: \"AWS\", regex: /amazonaws\\.com/i, headerRegex: /^x-amz-/i },\n      ];\n\n      const cdnUsage = new Set();\n      \n      // Check headers\n      response.headers.forEach((value, name) => {\n        for (const provider of cdnCloudProviders) {\n          if (provider.headerRegex.test(name) || provider.headerRegex.test(value)) {\n            cdnUsage.add(provider.name);\n          }\n        }\n      });\n\n      // Check page content\n      for (const provider of cdnCloudProviders) {\n        if (provider.regex.test(pageContent)) {\n          cdnUsage.add(provider.name);\n        }\n      }\n\n      // Estimate FCP based on page size and content (very rough estimation)\n      const estimatedFCP = Math.min(1000, Math.max(100, totalEstimatedSize * 1000 + imageCount * 10 + videoCount * 50));\n\n      // Simple availability check\n      const availability = response.ok ? \"Available\" : \"Not Available\";\n\n      // HTML preview (first 500 characters)\n      const htmlPreview = pageContent.slice(0, 500) + (pageContent.length > 500 ? '...' : '');\n\n      return new Response(JSON.stringify({\n        url,\n        pageTitle,\n        imageCount,\n        imageList,\n        videoCount,\n        videoList,\n        estimatedImageSize,\n        estimatedVideoSize,\n        totalEstimatedSize,\n        cdnUsage: Array.from(cdnUsage),\n        estimatedFCP,\n        latency: endTime - startTime,\n        availability,\n        htmlPreview,\n        fullHtml: pageContent\n      }), {\n        status: 200,\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    } catch (error) {\n      return new Response(JSON.stringify({ error: \"Failed to fetch or parse the URL\" }), {\n        status: 400,\n        headers: { \"Content-Type\": \"application/json\" },\n      });\n    }\n  }\n\n  return new Response(`\n    \n    \n      \n        \n        \n        Page Detector\n        \n      \n      \n        
\n        \n        \n      \n    \n  `, {\n    headers: { \"Content-Type\": \"text/html\" },\n  });\n}\n\nconst css = `\n  body {\n    font-family: Arial, sans-serif;\n    line-height: 1.6;\n    margin: 0;\n    padding: 20px;\n    background-color: #f4f4f4;\n  }\n  .container {\n    max-width: 800px;\n    margin: 0 auto;\n    background-color: #fff;\n    padding: 20px;\n    border-radius: 5px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  }\n  h1, h2, h3 {\n    color: #333;\n  }\n  h1 {\n    text-align: center;\n  }\n  form {\n    display: flex;\n    margin-bottom: 20px;\n  }\n  input[type=\"url\"] {\n    flex-grow: 1;\n    padding: 10px;\n    font-size: 16px;\n    border: 1px solid #ddd;\n    border-radius: 4px 0 0 4px;\n  }\n  button {\n    padding: 10px 20px;\n    font-size: 16px;\n    background-color: #5cb85c;\n    color: white;\n    border: none;\n    border-radius: 0 4px 4px 0;\n    cursor: pointer;\n  }\n  button:hover {\n    background-color: #4cae4c;\n  }\n  button:disabled {\n    background-color: #cccccc;\n    cursor: not-allowed;\n  }\n  .result {\n    background-color: #e9f7ef;\n    border: 1px solid #28a745;\n    border-radius: 4px;\n    padding: 15px;\n    margin-top: 20px;\n  }\n  .result h2 {\n    color: #28a745;\n    margin-top: 0;\n  }\n  .preview-container {\n    width: 100%;\n    max-width: 800px;\n    margin: 0 auto;\n    border: 1px solid #ddd;\n    margin-bottom: 15px;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n  }\n  .preview-wrapper {\n    position: relative;\n    padding-bottom: 56.25%; /* 16:9 aspect ratio */\n    height: 0;\n    overflow: hidden;\n  }\n  .page-preview {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n  .html-preview {\n    background-color: #fff9c4;\n    border: 1px solid #ffd54f;\n    border-radius: 4px;\n    padding: 15px;\n    margin-top: 20px;\n    overflow-x: auto;\n  }\n  .html-preview pre {\n    margin: 0;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n    font-family: 'Courier New', Courier, monospace;\n    font-size: 14px;\n    line-height: 1.5;\n  }\n  .html-preview h3 {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .toggle-view {\n    background-color: #007bff;\n    color: white;\n    border: none;\n    padding: 5px 10px;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 14px;\n  }\n  .toggle-view:hover {\n    background-color: #0056b3;\n  }\n  .footer {\n    text-align: center;\n    margin-top: 20px;\n    font-size: 14px;\n    color: #666;\n  }\n  .footer a {\n    color: #5cb85c;\n    text-decoration: none;\n  }\n  .footer a:hover {\n    text-decoration: underline;\n  }\n  .clickable {\n    cursor: pointer;\n    color: #007bff;\n    text-decoration: underline;\n  }\n  .popup {\n    position: fixed;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    background-color: #fff;\n    border: 2px solid #333;\n    border-radius: 5px;\n    padding: 20px;\n    max-width: 80%;\n    max-height: 80%;\n    overflow-y: auto;\n    z-index: 1000;\n    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);\n  }\n  .image-list-popup {\n    background-color: #ffcccb;\n    border-color: #ff0000;\n  }\n  .video-list-popup {\n    background-color: #e6f3ff;\n    border-color: #007bff;\n  }\n  .popup h3 {\n    margin-top: 0;\n    color: #333;\n  }\n  .popup ul {\n    list-style-type: none;\n    padding: 0;\n  }\n  .popup li {\n    margin-bottom: 10px;\n    word-break: break-all;\n  }\n  .tag { color: #905; }\n  .attribute { color: #690; }\n  .string { color: #07a; }\n`;","deleted","label",[99],"permalink","https://www.val.town/x/eligosmlytics/pageDetector/code/main.tsx","extension","actionData","errors"]

Image List

Video List

Page Detector

{getDomainPreview(result.url, result.pageTitle)}

Performance Metrics

\n Page HTML {showFullHtml ? 'Full View' : 'Preview'}\n \n {showFullHtml ? '🔍 Preview' : '🔎 Full View'}\n \n

\n Page HTML {showFullHtml ? 'Full View' : 'Preview'}\n \n