Spaces:

sudo-soldier
/

PYTR

Sleeping

App Files Files Community

sudo-soldier commited on Feb 7

Commit

d9ee000

verified ·

1 Parent(s): 80f04f5

Update api.html

Browse files

Files changed (1) hide show

api.html +188 -103

api.html CHANGED Viewed

@@ -1,103 +1,183 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
-    <title>Python YouTube Ringtones</title>
-    <meta name="title" content="Python YouTube Ringtones" />
-    <meta name="description" content="Generate custom ringtones from YouTube videos with one click! Python YouTube Ringtones lets you convert YouTube audio into high-quality MP3 and iPhone ringtones in seconds. No software required – fast, free, and online!" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://ringtones.jessejesse.xyz" />
-    <meta property="og:title" content="Python YouTube Ringtones" />
-    <meta property="og:description" content="Generate custom ringtones from YouTube videos with one click! Python YouTube Ringtones lets you convert YouTube audio into high-quality MP3 and iPhone ringtones in seconds. No software required – fast, free, and online!" />
-    <meta property="og:image" content="https://ringtones.jessejesse.xyz/og.png" />
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content="https://ringtones.jessejesse.xyz" />
-    <meta property="twitter:title" content="Python YouTube Ringtones" />
-    <meta property="twitter:description" content="Generate custom ringtones from YouTube videos with one click! Python YouTube Ringtones lets you convert YouTube audio into high-quality MP3 and iPhone ringtones in seconds. No software required – fast, free, and online!" />
-    <meta property="twitter:image" content="https://ringtones.jessejesse.xyz/og.png" />
-    <meta name="author" content="JesseJesse.xyz" />
-    <style>
-        body {
-          background: linear-gradient(135deg, #1a1a2e, #111827, #0f0f14);
-          color: white;
-          visibility: hidden;
-        }
-    </style>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        document.body.style.visibility = "visible";
-        updateRingtoneCount(); // Fetch count on page load
-      });
-    </script>
-  </head>
-  <body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white flex flex-col justify-center items-center h-screen">
-    <div class="w-full max-w-md bg-transparent p-6 rounded-lg shadow-lg text-center">
-      <img src="icon.png" alt="App Icon" class="w-20 h-20 mx-auto mb-4" />
-      <h1 class="text-xl font-bold mb-4">Python YouTube Ringtones</h1>
-      <p class="mt-4 text-center text-yellow-400">
-        ♪♬♪♬&nbsp;tones made:&nbsp;<span id="ringtone-count">0</span>
       </p>
       <br />
-      <div class="flex gap-2">
         <input
           id="youtube-url"
           type="text"
           placeholder="Enter YouTube URL"
-          class="flex-1 p-2 border border-gray-700 rounded bg-gray-700 text-white"
         />
-        <button onclick="pasteClipboard()" class="bg-gray-600 hover:bg-gray-500 px-3 py-2 rounded">
           &#9998;
         </button>
       </div>
-      <input
-        id="mp3-upload"
-        type="file"
-        accept="audio/*"
-        class="w-full p-2 mt-4 border border-gray-700 rounded bg-gray-700 text-white"
-      />
       <button
         onclick="processRingtone()"
-        class="w-full bg-indigo-700 hover:bg-green-800 text-white py-2 px-4 rounded mt-4"
       >
-        Generate Ringtones
       </button>
-      <p id="status" class="text-center mt-4 text-yellow-400"></p>
-      <a
-        id="android-ringtone"
-        href="#"
-        download
-        class="hidden block mt-4 text-center text-green-800"
-        >⬇ Android Ringtone</a
-      >
       <a
         id="iphone-ringtone"
         href="#"
         download
-        class="hidden block mt-4 text-center text-green-400"
         >⬇ iPhone Ringtone</a
       >
     </div>
-    <footer class="mt-6 text-green-600 text-sm text-center cursor-pointer" onclick="sharePage()">
-      JesseJesse.xyz
-    </footer>
-    <br />
-    <span class="inline-block ml-2 text-sm text-center cursor-pointer">&#9757;&nbsp;share</span>
     <script>
       const REDIS_URL = "https://amused-walleye-31373.upstash.io";
-      const REDIS_TOKEN = "AXqNASQgMWZmMTdjYTEtNTJjYi00MDczLWJmZDctNjFjZGUyOTA0ZjEyNjcyMTI0NDM2MDBjNDVmZmE5NjJlMTllYTkyMDI2MDU=";
       async function updateRingtoneCount() {
         try {
@@ -105,7 +185,8 @@
             headers: { Authorization: `Bearer ${REDIS_TOKEN}` },
           });
           const data = await response.json();
-          document.getElementById("ringtone-count").innerText = data.result || 0;
         } catch (error) {
           console.error("Error fetching ringtone count:", error);
         }
@@ -116,7 +197,7 @@
           await fetch(`${REDIS_URL}/incr/ringtone_count`, {
             headers: { Authorization: `Bearer ${REDIS_TOKEN}` },
           });
-          updateRingtoneCount(); //count
         } catch (error) {
           console.error("Error updating ringtone count:", error);
         }
@@ -124,27 +205,29 @@
       async function processRingtone() {
         const urlInput = document.getElementById("youtube-url").value;
-        const fileInput = document.getElementById("mp3-upload").files[0];
         const androidLink = document.getElementById("android-ringtone");
         const iphoneLink = document.getElementById("iphone-ringtone");
         const status = document.getElementById("status");
-        if (!urlInput && !fileInput) {
-          status.innerText = "❌ Please enter a YouTube URL or upload an MP3 file!";
           return;
         }
         try {
           status.innerText = "⏳ one moment please...";
-          const client = await import("https://cdn.jsdelivr.net/npm/@gradio/client/+esm").then((m) => m.Client);
           const connectedClient = await client.connect("sudo-soldier/PYTR");
-          const inputData = {
-            url: urlInput || "Hello!!",
-            uploaded_file: fileInput || null,
-          };
-          const result = await connectedClient.predict("/process_youtube_url", inputData);
           const androidFile = result.data[0]?.url || result.data[0]?.path;
           const iphoneFile = result.data[1]?.url || result.data[1]?.path;
@@ -153,15 +236,14 @@
             androidLink.download = "android_ringtone.mp3";
             androidLink.style.display = "block";
           }
           if (iphoneFile) {
             iphoneLink.href = iphoneFile;
             iphoneLink.download = "iphone_ringtone.m4r";
             iphoneLink.style.display = "block";
           }
-          status.innerText = "Ringtones Ready!";
-          incrementRingtoneCount(); //count
         } catch (error) {
           console.error(error);
           status.innerText = "Error processing request!";
@@ -173,20 +255,7 @@
           const text = await navigator.clipboard.readText();
           document.getElementById("youtube-url").value = text;
         } catch (error) {
-          alert("Clipboard access denied! Please paste manually.");
-        }
-      }
-      function sharePage() {
-        if (navigator.share) {
-          navigator
-            .share({
-              title: "ringtones.JesseJesse.xyz",
-              url: window.location.href,
-            })
-            .catch((error) => console.log("Sharing failed:", error));
-        } else {
-          alert("Share API not supported in this browser.");
         }
       }
     </script>
@@ -196,3 +265,19 @@

 <!DOCTYPE html>
 <html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PYTR</title>
+  <meta name="title" content="Python YouTube Ringtones" />
+  <meta name="description" content="Generate custom ringtones from YouTube videos with one click! Python YouTube Ringtones lets you convert YouTube audio into high-quality MP3 and iPhone ringtones in seconds. No software required – fast, free, and online!" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://ringtones.jessejesse.xyz" />
+  <meta property="og:title" content="Python YouTube Ringtones" />
+  <meta property="og:description" content="Generate custom ringtones from YouTube videos with one click! Python YouTube Ringtones lets you convert YouTube audio into high-quality MP3 and iPhone ringtones in seconds. No software required – fast, free, and online!" />
+  <meta property="og:image" content="https://ringtones.jessejesse.xyz/og.png" />
+  <meta property="twitter:card" content="summary_large_image" />
+  <meta property="twitter:url" content="https://ringtones.jessejesse.xyz" />
+  <meta property="twitter:title" content="Python YouTube Ringtones" />
+  <meta property="twitter:description" content="Generate custom ringtones from YouTube videos with one click! Python YouTube Ringtones lets you convert YouTube audio into high-quality MP3 and iPhone ringtones in seconds. No software required – fast, free, and online!" />
+  <meta property="twitter:image" content="https://ringtones.jessejesse.xyz/og.png" />
+  <meta name="author" content="JesseJesse.xyz" />
+  <!-- Web App Manifest -->
+  <link rel="manifest" href="/manifest.json" />
+  <!-- Icons -->
+  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16 32x32" />
+  <link rel="icon" href="/icon-192.png" type="image/png" sizes="192x192" />
+  <link rel="icon" href="/icon-512.png" type="image/png" sizes="512x512" />
+  <link rel="icon" href="/icon-192-maskable.png" type="image/png" sizes="192x192" purpose="maskable" />
+  <link rel="icon" href="/icon-512-maskable.png" type="image/png" sizes="512x512" purpose="maskable" />
+  <!-- Theme Colors -->
+  <meta name="theme-color" content="#1a1a2e" />
+  <!-- App Manifest Settings -->
+  <meta name="application-name" content="Python YouTube Ringtones" />
+  <meta name="short_name" content="YT Ringtones" />
+  <meta name="description" content="Generate custom ringtones from YouTube videos with one click! Python YouTube Ringtones lets you convert YouTube audio into high-quality MP3 and iPhone ringtones in seconds. No software required – fast, free, and online!" />
+  <meta name="start_url" content="/" />
+  <meta name="display" content="standalone" />
+  <meta name="background_color" content="#111827" />
+  <meta name="orientation" content="portrait" />
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    document.addEventListener("DOMContentLoaded", () => {
+      updateRingtoneCount();
+    });
+  </script>
+  <style>
+    @keyframes glow {
+      0% {
+        border-color: #4f46e5;
+      }
+      50% {
+        border-color: #fbbf24;
+      }
+      100% {
+        border-color: #4f46e5;
+      }
+    }
+    .glow-border {
+      animation: glow 1.5s ease-in-out infinite;
+    }
+  </style>
+</head>
+  <body
+    style="
+      background: linear-gradient(to bottom right, #1f2937, #374151, #111827);
+      color: white;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+    "
+  >
+    <div
+      id="ringtone-container"
+      style="
+        width: 100%;
+        max-width: 400px;
+        background: transparent;
+        border: 2px solid transparent;
+        border-radius: 8px;
+        padding: 24px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        text-align: center;
+      "
+    >
+      <img
+        src="icon.png"
+        alt="App Icon"
+        style="width: 120px; height: 120px; margin-bottom: 20px"
+      />
+      <h1 style="font-size: 24px; font-weight: bold; margin-bottom: 16px">
+        Python YouTube Ringtones
+      </h1>
+      <p style="margin-top: 16px; text-align: center; color: #fbbf24">
+        ♪♬♪♬&nbsp;&nbsp; <span id="ringtone-count">0</span>
       </p>
       <br />
+      <div style="display: flex; gap: 8px">
         <input
           id="youtube-url"
           type="text"
           placeholder="Enter YouTube URL"
+          style="
+            flex-grow: 1;
+            padding: 8px;
+            border: 1px solid #4b5563;
+            border-radius: 4px;
+            background-color: #374151;
+            color: white;
+          "
         />
+        <button
+          onclick="pasteClipboard()"
+          style="
+            background-color: #6b7280;
+            color: white;
+            padding: 8px 12px;
+            border-radius: 4px;
+          "
+        >
           &#9998;
         </button>
       </div>
       <button
         onclick="processRingtone()"
+        style="
+          width: 100%;
+          background-color: #4f46e5;
+          color: white;
+          padding: 12px 16px;
+          border-radius: 4px;
+          margin-top: 16px;
+        "
       >
+        Create Ringtones
       </button>
+      <p
+        id="status"
+        style="text-align: center; margin-top: 16px; color: #fbbf24"
+      ></p>
+     <a
+  id="android-ringtone"
+  href="#"
+  download="android_ringtone.mp3"
+  style="
+    display: none;
+    margin-top: 16px;
+    color: #34b334;
+    text-decoration: none;
+  "
+>⬇ Android Ringtone</a>
       <a
         id="iphone-ringtone"
         href="#"
         download
+        style="
+          display: none;
+          margin-top: 16px;
+          color: #3b82f6;
+          text-decoration: none;
+        "
         >⬇ iPhone Ringtone</a
       >
     </div>
     <script>
       const REDIS_URL = "https://amused-walleye-31373.upstash.io";
+      const REDIS_TOKEN =
+        "AXqNASQgMWZmMTdjYTEtNTJjYi00MDczLWJmZDctNjFjZGUyOTA0ZjEyNjcyMTI0NDM2MDBjNDVmZmE5NjJlMTllYTkyMDI2MDU=";
       async function updateRingtoneCount() {
         try {
             headers: { Authorization: `Bearer ${REDIS_TOKEN}` },
           });
           const data = await response.json();
+          document.getElementById("ringtone-count").innerText =
+            data.result || 0;
         } catch (error) {
           console.error("Error fetching ringtone count:", error);
         }
           await fetch(`${REDIS_URL}/incr/ringtone_count`, {
             headers: { Authorization: `Bearer ${REDIS_TOKEN}` },
           });
+          updateRingtoneCount();
         } catch (error) {
           console.error("Error updating ringtone count:", error);
         }
       async function processRingtone() {
         const urlInput = document.getElementById("youtube-url").value;
         const androidLink = document.getElementById("android-ringtone");
         const iphoneLink = document.getElementById("iphone-ringtone");
         const status = document.getElementById("status");
+        const ringtoneContainer = document.getElementById("ringtone-container");
+        if (!urlInput) {
+          status.innerText = "❌ Please enter a YouTube URL!";
           return;
         }
         try {
           status.innerText = "⏳ one moment please...";
+          const client = await import(
+            "https://cdn.jsdelivr.net/npm/@gradio/client/+esm"
+          ).then((m) => m.Client);
           const connectedClient = await client.connect("sudo-soldier/PYTR");
+          const result = await connectedClient.predict(
+            "/process_youtube_or_audio",
+            {
+              url: urlInput,
+              recorded_audio: null,
+            },
+          );
           const androidFile = result.data[0]?.url || result.data[0]?.path;
           const iphoneFile = result.data[1]?.url || result.data[1]?.path;
             androidLink.download = "android_ringtone.mp3";
             androidLink.style.display = "block";
           }
           if (iphoneFile) {
             iphoneLink.href = iphoneFile;
             iphoneLink.download = "iphone_ringtone.m4r";
             iphoneLink.style.display = "block";
           }
+          status.innerText = "JesseJesse.xyz";
+          ringtoneContainer.classList.add("glow-border");
+          incrementRingtoneCount();
         } catch (error) {
           console.error(error);
           status.innerText = "Error processing request!";
           const text = await navigator.clipboard.readText();
           document.getElementById("youtube-url").value = text;
         } catch (error) {
+          alert("Please add the song URL.");
         }
       }
     </script>