Hugging Face's logo

Spaces:
Woolfich
/
undefined-universe-explorer
Running

App Files Community
Woolfich commited on
Commit
68844ee
·
verified ·
1 Parent(s): a5fd1e0

сделай WASM на cargo leptos

Browse files
Files changed (2) hide show
  1. index.html +11 -6
  2. wasm.html +94 -0
index.html CHANGED
@@ -51,12 +51,17 @@
51
  <i data-feather="code" class="w-12 h-12 text-gray-400"></i>
52
  </div>
53
  </div>
54
-
55
- <button class="px-8 py-3 bg-gradient-to-r from-gray-300 to-gray-400 text-white rounded-full font-medium hover:from-gray-400 hover:to-gray-500 transition-all duration-300 flex items-center mx-auto">
56
- <i data-feather="compass" class="mr-2"></i>
57
- Begin Exploration
58
- </button>
59
- </div>
 
 
 
 
 
60
 
61
  <div class="mt-16 text-sm text-gray-500 flex items-center">
62
  <i data-feather="alert-circle" class="mr-2"></i>
 
51
  <i data-feather="code" class="w-12 h-12 text-gray-400"></i>
52
  </div>
53
  </div>
54
+ <div class="flex gap-4 justify-center">
55
+ <button class="px-8 py-3 bg-gradient-to-r from-gray-300 to-gray-400 text-white rounded-full font-medium hover:from-gray-400 hover:to-gray-500 transition-all duration-300 flex items-center">
56
+ <i data-feather="compass" class="mr-2"></i>
57
+ Begin Exploration
58
+ </button>
59
+ <a href="wasm.html" class="px-8 py-3 bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-full font-medium hover:from-blue-500 hover:to-blue-600 transition-all duration-300 flex items-center">
60
+ <i data-feather="cpu" class="mr-2"></i>
61
+ WASM Demo
62
+ </a>
63
+ </div>
64
+ </div>
65
 
66
  <div class="mt-16 text-sm text-gray-500 flex items-center">
67
  <i data-feather="alert-circle" class="mr-2"></i>
wasm.html ADDED
@@ -0,0 +1,94 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WASM with Leptos</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/atom-one-dark.min.css">
10
+ <script src="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/highlight.min.js"></script>
11
+ <script src="https://unpkg.com/wasm-bindgen/wasm_bindgen.js"></script>
12
+ </head>
13
+ <body class="min-h-screen bg-gray-900 text-gray-100">
14
+ <div class="container mx-auto px-4 py-12">
15
+ <div class="text-center mb-12">
16
+ <h1 class="text-4xl font-bold mb-4">WASM with Leptos</h1>
17
+ <p class="text-xl text-gray-300">Rust-powered WebAssembly application</p>
18
+ </div>
19
+
20
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
21
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
22
+ <h2 class="text-2xl font-semibold mb-4 flex items-center">
23
+ <i data-feather="cpu" class="mr-2"></i> WASM Demo
24
+ </h2>
25
+ <div id="wasm-output" class="min-h-32 bg-gray-700 rounded-lg p-4 mb-4"></div>
26
+ <button id="wasm-btn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition">
27
+ Run WASM
28
+ </button>
29
+ </div>
30
+
31
+ <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
32
+ <h2 class="text-2xl font-semibold mb-4 flex items-center">
33
+ <i data-feather="code" class="mr-2"></i> Example Code
34
+ </h2>
35
+ <pre class="rounded-lg overflow-hidden"><code class="language-rust hljs">
36
+ // Cargo.toml
37
+ [dependencies]
38
+ leptos = "0.3"
39
+ wasm-bindgen = "0.2"
40
+
41
+ // lib.rs
42
+ use leptos::*;
43
+ use wasm_bindgen::prelude::*;
44
+
45
+ #[wasm_bindgen]
46
+ pub fn greet(name: &str) -> String {
47
+ format!("Hello, {}!", name)
48
+ }
49
+
50
+ #[component]
51
+ pub fn App() -> impl IntoView {
52
+ let (name, set_name) = create_signal("World".to_string());
53
+
54
+ view! {
55
+ &lt;input
56
+ type="text"
57
+ on:input=move |ev| set_name(event_target_value(&ev))
58
+ placeholder="Your name"
59
+ /&gt;
60
+ &lt;p&gt;"Hello, " {name}!&lt;/p&gt;
61
+ }
62
+ }
63
+ </code></pre>
64
+ </div>
65
+ </div>
66
+
67
+ <div class="mt-12 text-center text-gray-400">
68
+ <p>Build with Rust + WASM + Leptos</p>
69
+ </div>
70
+ </div>
71
+
72
+ <script>
73
+ async function loadWasm() {
74
+ try {
75
+ const wasm = await wasm_bindgen('./pkg/wasm_bg.wasm');
76
+ wasm_bindgen = wasm;
77
+
78
+ document.getElementById('wasm-btn').addEventListener('click', () => {
79
+ const output = document.getElementById('wasm-output');
80
+ output.textContent = wasm_bindgen.greet('WASM Visitor');
81
+ });
82
+ } catch (err) {
83
+ console.error('Failed to load WASM:', err);
84
+ }
85
+ }
86
+
87
+ document.addEventListener('DOMContentLoaded', () => {
88
+ feather.replace();
89
+ hljs.highlightAll();
90
+ loadWasm();
91
+ });
92
+ </script>
93
+ </body>
94
+ </html>