Spaces:

tspb
/

risu

Running

App Files Files Community

tspb commited on Jan 7, 2025

Commit

1627169

verified ·

1 Parent(s): 134f09f

Update index.html

Browse files

add stfileselector button and Adapted for Mobile Browser

Files changed (1) hide show

index.html +292 -93

index.html CHANGED Viewed

@@ -2,27 +2,186 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>RISU File Tools</title>
     <script src="./pako.min.js"></script>
     <script src="./msgpackr.min.js"></script>
     <style>
-        .container { margin: 20px; }
-        textarea { width: 100%; height: 200px; margin: 10px 0; }
-        .output { margin-top: 20px; }
-        pre { white-space: pre-wrap; }
-        .tool-section { margin-bottom: 30px; padding: 20px; border: 1px solid #ddd; }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="tool-section">
             <h1>ST to Risu Converter</h1>
-            <label for="stInput">Paste ST JSON here:</label>
-            <textarea id="stInput" placeholder="Paste ST JSON content..."></textarea>
-            <label for="risuDefault">Paste Risu Default JSON here:</label>
-            <textarea id="risuDefault" placeholder="Paste Risu Default JSON content...">
-{
   "name": "Default",
   "apiType": "instructgpt35",
   "openAIKey": "",
@@ -233,65 +392,97 @@
   "enableCustomFlags": false,
   "regex": [],
   "image": ""
-}
-            </textarea>
-            <button id="convertButton">Convert</button>
             <div class="output">
-                <h2>Converted Risu JSON:</h2>
-        	  <button id="copyButton">Copy</button>
-        	  <button id="saveButton">Save as JSON</button>
-        	  <pre id="stOutput"></pre>
             </div>
         </div>
         <div class="tool-section">
             <h1>RISU Preset File Tools</h1>
-            <div>
                 <h2>Decrypt RISU Preset</h2>
-                <input type="file" id="fileInput" accept=".risupreset,.risup"/>
-                <button id="recoverButton">Recover Preset</button>
             </div>
-            <div style="margin-top: 20px;">
                 <h2>Encrypt to RISU Preset</h2>
-                <input type="file" id="jsonInput" accept=".json"/>
-                <button id="encryptButton">Create .risup</button>
             </div>
             <pre id="output"></pre>
         </div>
     </div>
     <script>
         // Copy button functionality
-    document.getElementById("copyButton").addEventListener("click", function() {
-        const outputText = document.getElementById("stOutput").textContent;
-        navigator.clipboard.writeText(outputText).then(function() {
-            alert("Copied to clipboard!");
-        }).catch(function(err) {
-            alert("Failed to copy text: " + err);
         });
-    });
-    // Save as JSON button functionality
-    document.getElementById("saveButton").addEventListener("click", function() {
-        const outputText = document.getElementById("stOutput").textContent;
-        // Ensure the output is valid JSON
-        try {
-            const jsonObject = JSON.parse(outputText); // Validate JSON format
-            const blob = new Blob([JSON.stringify(jsonObject, null, 2)], { type: 'application/json' });
-            const link = document.createElement('a');
-            link.href = URL.createObjectURL(blob);
-            link.download = 'converted_risu.json'; // File name
-            link.click();
-        } catch (error) {
-            alert("The output is not valid JSON.");
-        }
-    });
         // ST to Risu Converter Logic
         document.getElementById('convertButton').addEventListener('click', function convert() {
@@ -507,68 +698,64 @@
             );
         }
-async function recoverPresetFromFile(file) {
-    try {
-        const arrayBuffer = await file.arrayBuffer();
-        const uint8Array = new Uint8Array(arrayBuffer);
-        let finalData;
-        if (file.name.endsWith('.risup')) {
-            // 处理 .risup 文件
-            const wasmInstance = await initWasm();
-            const decodedData = await decodeRPack(uint8Array, wasmInstance);
-            console.log("1. RPack decoded:", decodedData);
-            const decompressedData = pako.inflate(decodedData);
-            console.log("2. Decompressed:", decompressedData);
-            const firstDecode = msgpackr.decode(decompressedData);
-            console.log("3. First msgpack decode:", firstDecode);
-            const decryptedData = await decryptBuffer(firstDecode.preset, 'risupreset');
-            console.log("4. Decrypted data:", new Uint8Array(decryptedData));
-            finalData = msgpackr.decode(new Uint8Array(decryptedData));
-            console.log("5. Final decoded data:", finalData);
-        } else if (file.name.endsWith('.risupreset')) {
-            // 处理 .risupreset 文件
-            const decompressedData = pako.inflate(uint8Array);
-            console.log("1. Decompressed:", decompressedData);
-            const firstDecode = msgpackr.decode(decompressedData);
-            console.log("2. First msgpack decode:", firstDecode);
-            const encryptedPreset = firstDecode.preset ?? firstDecode.pres;
-            if (!encryptedPreset) {
-                throw new Error("Missing `preset` or `pres` field in .risupreset file.");
-            }
-            const decryptedData = await decryptBuffer(encryptedPreset, 'risupreset');
-            console.log("3. Decrypted data:", new Uint8Array(decryptedData));
-            finalData = msgpackr.decode(new Uint8Array(decryptedData));
-            console.log("4. Final decoded data:", finalData);
-        } else {
-            throw new Error('Unsupported file format');
         }
-        // 成功解析数据后显示
-        console.log("Final decoded data:", finalData);
-        document.getElementById('output').textContent = JSON.stringify(finalData, null, 2);
-    } catch (error) {
-        // 捕获错误并显示
-        console.error('Error recovering preset:', error);
-        document.getElementById('output').textContent = `Error: ${error.message}\n\nStack: ${error.stack}`;
-    }
-}
         async function createPresetFile(file) {
             try {
                 const text = await file.text();
                 const jsonData = JSON.parse(text);
@@ -605,9 +792,21 @@ async function recoverPresetFromFile(file) {
             } catch (error) {
                 console.error('Error creating preset:', error);
                 document.getElementById('output').textContent = `Error: ${error.message}\n\nStack: ${error.stack}`;
             }
         }
         document.getElementById('recoverButton').addEventListener('click', () => {
             const fileInput = document.getElementById('fileInput');
             const file = fileInput.files[0];

 <html lang="en">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>RISU File Tools</title>
     <script src="./pako.min.js"></script>
     <script src="./msgpackr.min.js"></script>
     <style>
+        /* 保持之前的所有样式不变 */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            line-height: 1.6;
+            padding: 1rem;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1rem;
+        }
+        .tool-section {
+            background: #fff;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 1.5rem;
+            margin-bottom: 2rem;
+        }
+        h1 {
+            font-size: 1.5rem;
+            color: #333;
+            margin-bottom: 1rem;
+        }
+        h2 {
+            font-size: 1.2rem;
+            color: #444;
+            margin: 1rem 0;
+        }
+        .input-group {
+            margin-bottom: 1rem;
+        }
+        label {
+            display: block;
+            margin-bottom: 0.5rem;
+            color: #555;
+        }
+        textarea {
+            width: 100%;
+            min-height: 150px;
+            padding: 0.8rem;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            resize: vertical;
+            font-family: monospace;
+            margin-bottom: 1rem;
+        }
+        .button-group {
+            display: flex;
+            gap: 0.5rem;
+            flex-wrap: wrap;
+            margin: 1rem 0;
+        }
+        button {
+            padding: 0.6rem 1.2rem;
+            border: none;
+            border-radius: 4px;
+            background-color: #007bff;
+            color: white;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        .file-input-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin-bottom: 1rem;
+            flex-wrap: wrap;
+        }
+        input[type="file"] {
+            max-width: 100%;
+        }
+        .output {
+            margin-top: 1.5rem;
+            padding: 1rem;
+            background: #f8f9fa;
+            border-radius: 4px;
+        }
+        pre {
+            white-space: pre-wrap;
+            word-wrap: break-word;
+            padding: 1rem;
+            background: #fff;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            font-size: 0.9rem;
+            overflow-x: auto;
+        }
+        @media screen and (max-width: 768px) {
+            .container {
+                padding: 0.5rem;
+            }
+            .tool-section {
+                padding: 1rem;
+            }
+            h1 {
+                font-size: 1.3rem;
+            }
+            h2 {
+                font-size: 1.1rem;
+            }
+            button {
+                width: 100%;
+                margin-bottom: 0.5rem;
+            }
+            .file-input-wrapper {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            input[type="file"] {
+                width: 100%;
+            }
+            textarea {
+                min-height: 120px;
+            }
+        }
+        .loading {
+            display: none;
+            text-align: center;
+            margin: 1rem 0;
+        }
+        .loading.active {
+            display: block;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="tool-section">
             <h1>ST to Risu Converter</h1>
+            <div class="input-group">
+                <label for="stInput">Paste ST JSON here:</label>
+                <div class="file-input-wrapper">
+                    <button id="stfileSelectButton">Choose File</button>
+                    <input type="file" id="stfileInput" accept=".txt,.json" style="display:none;" />
+                </div>
+                <textarea id="stInput" placeholder="Paste ST JSON content..."></textarea>
+            </div>
+            <div class="input-group">
+                <label for="risuDefault">Paste Risu Default JSON here:</label>
+                <textarea id="risuDefault" placeholder="Paste Risu Default JSON content...">{
   "name": "Default",
   "apiType": "instructgpt35",
   "openAIKey": "",
   "enableCustomFlags": false,
   "regex": [],
   "image": ""
+}</textarea>
+            </div>
+            <div class="button-group">
+                <button id="convertButton">Convert</button>
+            </div>
             <div class="output">
+                <div class="button-group">
+                    <button id="copyButton">Copy</button>
+                    <button id="saveButton">Save as JSON</button>
+                </div>
+                <pre id="stOutput"></pre>
             </div>
         </div>
         <div class="tool-section">
             <h1>RISU Preset File Tools</h1>
+            <div class="input-group">
                 <h2>Decrypt RISU Preset</h2>
+                <div class="file-input-wrapper">
+                    <input type="file" id="fileInput" accept=".risupreset,.risup"/>
+                    <button id="recoverButton">Recover Preset</button>
+                </div>
             </div>
+            <div class="input-group">
                 <h2>Encrypt to RISU Preset</h2>
+                <div class="file-input-wrapper">
+                    <input type="file" id="jsonInput" accept=".json"/>
+                    <button id="encryptButton">Create .risup</button>
+                </div>
             </div>
+            <div class="loading" id="loadingIndicator">Processing...</div>
             <pre id="output"></pre>
         </div>
     </div>
     <script>
+        //st文件选择
+        document.getElementById("stfileSelectButton").addEventListener("click", function() {
+            // 触发文件选择框
+            document.getElementById("stfileInput").click();
+        });
+        // 处理文件选择和读取内容
+        document.getElementById("stfileInput").addEventListener("change", function(event) {
+            const file = event.target.files[0]; // 获取选择的第一个文件
+            if (file) {
+                const reader = new FileReader();
+                // 文件读取成功后的回调
+                reader.onload = function(e) {
+                    const fileContent = e.target.result;
+                    document.getElementById("stInput").value = fileContent; // 填充到textarea中
+                };
+                // 读取文件内容
+                reader.readAsText(file); // 读取文件为文本
+            }
+        });
         // Copy button functionality
+        document.getElementById("copyButton").addEventListener("click", function() {
+            const outputText = document.getElementById("stOutput").textContent;
+            navigator.clipboard.writeText(outputText).then(function() {
+                alert("Copied to clipboard!");
+            }).catch(function(err) {
+                alert("Failed to copy text: " + err);
+            });
+        });
+// 接着前面的script标签内容继续添加代码:
+        // Save as JSON button functionality
+        document.getElementById("saveButton").addEventListener("click", function() {
+            const outputText = document.getElementById("stOutput").textContent;
+            // Ensure the output is valid JSON
+            try {
+                const jsonObject = JSON.parse(outputText); // Validate JSON format
+                const blob = new Blob([JSON.stringify(jsonObject, null, 2)], { type: 'application/json' });
+                const link = document.createElement('a');
+                link.href = URL.createObjectURL(blob);
+                link.download = 'converted_risu.json'; // File name
+                link.click();
+            } catch (error) {
+                alert("The output is not valid JSON.");
+            }
         });
         // ST to Risu Converter Logic
         document.getElementById('convertButton').addEventListener('click', function convert() {
             );
         }
+        async function recoverPresetFromFile(file) {
+            try {
+                showLoading();
+                const arrayBuffer = await file.arrayBuffer();
+                const uint8Array = new Uint8Array(arrayBuffer);
+                let finalData;
+                if (file.name.endsWith('.risup')) {
+                    const wasmInstance = await initWasm();
+                    const decodedData = await decodeRPack(uint8Array, wasmInstance);
+                    console.log("1. RPack decoded:", decodedData);
+                    const decompressedData = pako.inflate(decodedData);
+                    console.log("2. Decompressed:", decompressedData);
+                    const firstDecode = msgpackr.decode(decompressedData);
+                    console.log("3. First msgpack decode:", firstDecode);
+                    const decryptedData = await decryptBuffer(firstDecode.preset, 'risupreset');
+                    console.log("4. Decrypted data:", new Uint8Array(decryptedData));
+                    finalData = msgpackr.decode(new Uint8Array(decryptedData));
+                    console.log("5. Final decoded data:", finalData);
+                } else if (file.name.endsWith('.risupreset')) {
+                    const decompressedData = pako.inflate(uint8Array);
+                    console.log("1. Decompressed:", decompressedData);
+                    const firstDecode = msgpackr.decode(decompressedData);
+                    console.log("2. First msgpack decode:", firstDecode);
+                    const encryptedPreset = firstDecode.preset ?? firstDecode.pres;
+                    if (!encryptedPreset) {
+                        throw new Error("Missing `preset` or `pres` field in .risupreset file.");
+                    }
+                    const decryptedData = await decryptBuffer(encryptedPreset, 'risupreset');
+                    console.log("3. Decrypted data:", new Uint8Array(decryptedData));
+                    finalData = msgpackr.decode(new Uint8Array(decryptedData));
+                    console.log("4. Final decoded data:", finalData);
+                } else {
+                    throw new Error('Unsupported file format');
+                }
+                document.getElementById('output').textContent = JSON.stringify(finalData, null, 2);
+            } catch (error) {
+                console.error('Error recovering preset:', error);
+                document.getElementById('output').textContent = `Error: ${error.message}\n\nStack: ${error.stack}`;
+            } finally {
+                hideLoading();
+            }
         }
         async function createPresetFile(file) {
             try {
+                showLoading();
                 const text = await file.text();
                 const jsonData = JSON.parse(text);
             } catch (error) {
                 console.error('Error creating preset:', error);
                 document.getElementById('output').textContent = `Error: ${error.message}\n\nStack: ${error.stack}`;
+            } finally {
+                hideLoading();
             }
         }
+        // 添加loading状态控制
+        function showLoading() {
+            document.getElementById('loadingIndicator').classList.add('active');
+        }
+        function hideLoading() {
+            document.getElementById('loadingIndicator').classList.remove('active');
+        }
+        // Attach event listeners for the file buttons
         document.getElementById('recoverButton').addEventListener('click', () => {
             const fileInput = document.getElementById('fileInput');
             const file = fileInput.files[0];