汉化
This commit is contained in:
parent
db2e9a68ef
commit
f8cfd629e0
@ -1,7 +1,7 @@
|
||||
// The root filesystem location
|
||||
export const diskImageUrl = "wss://disks.webvm.io/debian_large_20230522_5044875331.ext2";
|
||||
export const diskImageUrl = "/disk-images/debian_large_20230522_5044875331.ext2";
|
||||
// The root filesystem backend type
|
||||
export const diskImageType = "cloud";
|
||||
export const diskImageType = "bytes";
|
||||
// Print an introduction message about the technology
|
||||
export const printIntro = true;
|
||||
// Is a graphical display needed
|
||||
|
||||
21
src/app.html
21
src/app.html
@ -1,28 +1,11 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>WebVM - Linux virtualization in WebAssembly</title>
|
||||
|
||||
<meta name="description" content="Linux virtual machine, running in the browser via HTML5/WebAssembly. Networking and graphics supported.">
|
||||
<meta name="keywords" content="WebVM, Virtual Machine, CheerpX, x86 virtualization, WebAssembly, Tailscale, JIT">
|
||||
<meta property="og:title" content="WebVM - Linux virtualization in WebAssembly" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="WebVM"/>
|
||||
<meta property="og:image" content="https://webvm.io/assets/social_2024.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@leaningtech" />
|
||||
<meta name="twitter:title" content="WebVM - Linux virtualization in WebAssembly" />
|
||||
<meta name="twitter:description" content="Linux virtual machine, running in the browser via HTML5/WebAssembly. Networking and graphics supported.">
|
||||
<meta name="twitter:image" content="https://webvm.io/assets/social_2024.png" />
|
||||
<title>WebVM(o゜▽゜)o☆</title>
|
||||
|
||||
<!-- Apple iOS web clip compatibility tags -->
|
||||
<meta name="application-name" content="WebVM" />
|
||||
<meta name="apple-mobile-web-app-title" content="WebVM" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
||||
<link rel="shortcut icon" href="tower.ico">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
@ -77,11 +77,11 @@
|
||||
}
|
||||
</script>
|
||||
<h1 class="text-lg font-bold">Claude AI Integration</h1>
|
||||
<p>WebVM is integrated with Claude by Anthropic AI. You can prompt the AI to control the system.</p>
|
||||
<p>You need to provide your API key. The key is only saved locally to your browser.</p>
|
||||
<p>WebVM使用Anthropic AI与Claude集成。你可以用AI控制系统。</p>
|
||||
<p>您需要提供您的API密钥。密钥仅在浏览器中本地保存。</p>
|
||||
<div class="flex grow flex-col overflow-y-hidden gap-2">
|
||||
<p class="flex flex-row gap-2">
|
||||
<span class="mr-auto flex items-center">Conversation history</span>
|
||||
<span class="mr-auto flex items-center">对话历史</span>
|
||||
<SmallButton buttonIcon="fa-solid fa-download" clickHandler={handleDownload} buttonTooltip="Save conversation as image"></SmallButton>
|
||||
<SmallButton buttonIcon="fa-solid fa-brain" clickHandler={toggleThinkingMode} buttonTooltip="{$enableThinking ? "Disable" : "Enable"} thinking mode" bgColor={$enableThinking ? "bg-neutral-500" : "bg-neutral-700"}></SmallButton>
|
||||
<SmallButton buttonIcon="fa-solid fa-trash-can" clickHandler={clearMessageHistory} buttonTooltip="Clear conversation history"></SmallButton>
|
||||
@ -102,7 +102,7 @@
|
||||
</div>
|
||||
</div>
|
||||
{#if $apiState == "KEY_REQUIRED"}
|
||||
<textarea class="bg-neutral-700 p-2 rounded-md placeholder-gray-400 resize-none shrink-0" placeholder="Insert your Claude API Key" rows="1" on:keydown={handleKeyEnter} on:input={handleResize} id="ai-input"/>
|
||||
<textarea class="bg-neutral-700 p-2 rounded-md placeholder-gray-400 resize-none shrink-0" placeholder="在此输入您的Claude API密钥" rows="1" on:keydown={handleKeyEnter} on:input={handleResize} id="ai-input"/>
|
||||
{:else if $aiActivity}
|
||||
{#if stopRequested }
|
||||
<PanelButton buttonIcon="fa-solid fa-hand" buttonText="Stopping...">
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<h1 class="text-lg font-bold">Engine</h1>
|
||||
<PanelButton buttonImage="assets/cheerpx.svg" clickUrl="https://cheerpx.io/docs" buttonText="Explore CheerpX">
|
||||
</PanelButton>
|
||||
<p><span class="font-bold">Virtual CPU: </span>{$cpuPercentage}%</p>
|
||||
<p>CheerpX is a x86 virtualization engine in WebAssembly</p>
|
||||
<p>It can securely run unmodified x86 binaries and libraries in the browser</p>
|
||||
<p>Excited about our technology? <a class="underline" href="https://cheerpx.io/docs/getting-started" target="_blank">Start building</a> your projects using <a class="underline" href="https://cheerpx.io/" target="_blank">CheerpX</a> today!</p>
|
||||
<p><span class="font-bold">虚拟CPU占用: </span>{$cpuPercentage}%</p>
|
||||
<p>CheerpX是运行于WebAssembly的一个x86虚拟化引擎</p>
|
||||
<p>它可以在浏览器中安全地运行未经修改的x86二进制文件和库</p>
|
||||
<p>对这个技术感兴趣吗？<a class="underline" href="https://cheerpx.io/docs/getting-started" target="_blank">点此开始构建</a> 你的项目————使用 <a class="underline" href="https://cheerpx.io/" target="_blank">CheerpX</a> </p>
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
<script>
|
||||
import PanelButton from './PanelButton.svelte';
|
||||
import DiscordPresenceCount from 'labs/packages/astro-theme/components/nav/DiscordPresenceCount.svelte'
|
||||
</script>
|
||||
|
||||
<h1 class="text-lg font-bold">Discord</h1>
|
||||
<PanelButton buttonImage="assets/discord-mark-blue.svg" clickUrl="https://discord.gg/yTNZgySKGa" buttonText="Join our Discord">
|
||||
<i class='fas fa-circle fa-xs ml-auto text-green-500'></i>
|
||||
<span class="ml-1"><DiscordPresenceCount /></span>
|
||||
</PanelButton>
|
||||
<p>Do you have any question about WebVM or CheerpX?</p>
|
||||
<p>Join our community, we are happy to help!</p>
|
||||
@ -1,62 +0,0 @@
|
||||
<script>
|
||||
import PanelButton from './PanelButton.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { diskLatency } from './activities.js'
|
||||
var dispatch = createEventDispatcher();
|
||||
let state = "START";
|
||||
function handleReset()
|
||||
{
|
||||
if(state == "START")
|
||||
state = "CONFIRM";
|
||||
else if (state == "CONFIRM") {
|
||||
state = "RESETTING";
|
||||
dispatch('reset');
|
||||
}
|
||||
}
|
||||
function getButtonText(state)
|
||||
{
|
||||
if(state == "START")
|
||||
return "Reset disk";
|
||||
else if (state == "RESETTING")
|
||||
return "Resetting...";
|
||||
else
|
||||
return "Reset disk. Confirm?";
|
||||
}
|
||||
function getBgColor(state)
|
||||
{
|
||||
if(state == "START")
|
||||
{
|
||||
// Use default
|
||||
return undefined;
|
||||
}
|
||||
else
|
||||
{
|
||||
return "bg-red-900";
|
||||
}
|
||||
}
|
||||
function getHoverColor(state)
|
||||
{
|
||||
if(state == "START")
|
||||
{
|
||||
// Use default
|
||||
return undefined;
|
||||
}
|
||||
else
|
||||
{
|
||||
return "hover:bg-red-700";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<h1 class="text-lg font-bold">Disk</h1>
|
||||
<PanelButton buttonIcon="fa-solid fa-trash-can" clickHandler={handleReset} buttonText={getButtonText(state)} bgColor={getBgColor(state)} hoverColor={getHoverColor(state)}>
|
||||
</PanelButton>
|
||||
{#if state == "CONFIRM"}
|
||||
<p><span class="font-bold">Warning: </span>WebVM will reload</p>
|
||||
{:else if state == "RESETTING"}
|
||||
<p><span class="font-bold">Reset in progress: </span>Please wait...</p>
|
||||
{:else}
|
||||
<p><span class="font-bold">Backend latency: </span>{$diskLatency}ms</p>
|
||||
{/if}
|
||||
<p>WebVM runs on top of a complete Linux distribution</p>
|
||||
<p>Filesystems up to 2GB are supported and data is downloaded completely on-demand</p>
|
||||
<p>The WebVM cloud backend uses WebSockets and a it's distributed via a global CDN to minimize download latency</p>
|
||||
@ -1,13 +0,0 @@
|
||||
<script>
|
||||
import PanelButton from './PanelButton.svelte';
|
||||
import GitHubStarCount from 'labs/packages/astro-theme/components/nav/GitHubStarCount.svelte'
|
||||
</script>
|
||||
|
||||
<h1 class="text-lg font-bold">GitHub</h1>
|
||||
<PanelButton buttonImage="assets/github-mark-white.svg" clickUrl="https://github.com/leaningtech/webvm" buttonText="GitHub repo">
|
||||
<i class='fas fa-star fa-xs ml-auto'></i>
|
||||
<span class="ml-1"><GitHubStarCount repo="leaningtech/webvm"/></span>
|
||||
</PanelButton>
|
||||
<p>Like WebVM? <a class="underline" href="https://github.com/leaningtech/webvm" target="_blank">Give us a star!</a></p>
|
||||
<p>WebVM is FOSS, you can fork it to build your own version and begin working on your CheerpX-based project</p>
|
||||
<p>Found a bug? Please open a <a class="underline" href="https://github.com/leaningtech/webvm/issues" target="_blank">GitHub issue</a></p>
|
||||
@ -1,11 +1,11 @@
|
||||
<h1 class="text-lg font-bold">Information</h1>
|
||||
<img src="assets/webvm_hero.png" alt="WebVM Logo" class="w-56 h-56 object-contain self-center">
|
||||
<p>WebVM is a virtual Linux environment running in the browser via WebAssembly</p>
|
||||
<p>It is based on:</p>
|
||||
<p>WebVM是一个通过WebAssembly在浏览器中运行的虚拟Linux环境</p>
|
||||
<p>它基于：</p>
|
||||
<ul class="list-disc list-inside">
|
||||
<li><a class="underline" target="_blank" href="https://cheerpx.io/">CheerpX</a>: x86 JIT in Wasm</li>
|
||||
<li><a class="underline" target="_blank" href="https://xtermjs.org/">Xterm.js</a>: interactive terminal</li>
|
||||
<li>Local/private <a class="underline" target="_blank" href="https://cheerpx.io/docs/guides/File-System-support">file storage</a></li>
|
||||
<li><a class="underline" target="_blank" href="https://cheerpx.io/docs/guides/Networking">Networking</a> via <a class="underline" target="_blank" href="https://tailscale.com/">Tailscale</a></li>
|
||||
<li><a class="underline" target="_blank" href="https://cheerpx.io/">CheerpX</a>: 在Wasm中运行的x86即时编译器</li>
|
||||
<li><a class="underline" target="_blank" href="https://xtermjs.org/">Xterm.js</a>: 交互式终端实现</li>
|
||||
<li>Local/private <a class="underline" target="_blank" href="https://cheerpx.io/docs/guides/File-System-support">文件存储实现</a></li>
|
||||
<li><a class="underline" target="_blank" href="https://cheerpx.io/docs/guides/Networking">Networking</a> 基于 <a class="underline" target="_blank" href="https://tailscale.com/">Tailscale</a></li>
|
||||
</ul>
|
||||
<slot></slot>
|
||||
|
||||
@ -20,5 +20,5 @@
|
||||
<i class='fas fa-circle fa-xs ml-auto {$exitNode ? 'text-green-500' : 'text-amber-500'}' title={$exitNode ? 'Ready' : 'No exit node'}></i>
|
||||
{/if}
|
||||
</PanelButton>
|
||||
<p>WebVM can connect to the Internet via Tailscale</p>
|
||||
<p>Using Tailscale is required since browser do not support TCP/UDP sockets (yet!)</p>
|
||||
<p>WebVM可以通过Tailscale连接到互联网</p>
|
||||
<p>使用Tailscale是必需的，因为浏览器不支持TCP/UDP套接字（目前）</p>
|
||||
|
||||
@ -1,14 +0,0 @@
|
||||
<script>
|
||||
import BlogPost from './BlogPost.svelte';
|
||||
import { page } from '$app/stores';
|
||||
</script>
|
||||
<h1 class="text-lg font-bold">Blog posts</h1>
|
||||
<div class="overflow-y-scroll scrollbar flex flex-col gap-2">
|
||||
{#each $page.data.posts as post}
|
||||
<BlogPost
|
||||
title={post.title}
|
||||
image={post.image}
|
||||
url={post.url}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
@ -6,9 +6,6 @@
|
||||
import CpuTab from './CpuTab.svelte';
|
||||
import DiskTab from './DiskTab.svelte';
|
||||
import AnthropicTab from './AnthropicTab.svelte';
|
||||
import PostsTab from './PostsTab.svelte';
|
||||
import DiscordTab from './DiscordTab.svelte';
|
||||
import GitHubTab from './GitHubTab.svelte';
|
||||
import SmallButton from './SmallButton.svelte';
|
||||
import { cpuActivity, diskActivity, aiActivity } from './activities.js';
|
||||
const icons = [
|
||||
@ -18,9 +15,6 @@
|
||||
{ icon: 'fas fa-compact-disc', info: 'Disk', activity: diskActivity },
|
||||
{ icon: 'fas fa-robot', info: 'ClaudeAI', activity: aiActivity },
|
||||
null,
|
||||
{ icon: 'fas fa-book-open', info: 'Posts', activity: null },
|
||||
{ icon: 'fab fa-discord', info: 'Discord', activity: null },
|
||||
{ icon: 'fab fa-github', info: 'GitHub', activity: null },
|
||||
];
|
||||
let dispatch = createEventDispatcher();
|
||||
let activeInfo = null; // Tracks currently visible info.
|
||||
@ -109,12 +103,6 @@
|
||||
<DiskTab on:reset/>
|
||||
{:else if activeInfo === 'ClaudeAI'}
|
||||
<AnthropicTab handleTool={handleTool} />
|
||||
{:else if activeInfo === 'Posts'}
|
||||
<PostsTab/>
|
||||
{:else if activeInfo === 'Discord'}
|
||||
<DiscordTab/>
|
||||
{:else if activeInfo === 'GitHub'}
|
||||
<GitHubTab/>
|
||||
{:else}
|
||||
<p>TODO: {activeInfo}</p>
|
||||
{/if}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<script>
|
||||
import { onMount, tick } from 'svelte';
|
||||
import { get } from 'svelte/store';
|
||||
import Nav from 'labs/packages/global-navbar/src/Nav.svelte';
|
||||
import SideBar from '$lib/SideBar.svelte';
|
||||
import '$lib/global.css';
|
||||
import '@xterm/xterm/css/xterm.css'
|
||||
@ -361,8 +360,7 @@
|
||||
</script>
|
||||
|
||||
<main class="relative w-full h-full">
|
||||
<Nav />
|
||||
<div class="absolute top-10 bottom-0 left-0 right-0">
|
||||
<div class="absolute top-0 bottom-0 left-0 right-0">
|
||||
<SideBar on:connect={handleConnect} on:reset={handleReset} handleTool={!configObj.needsDisplay || curVT == 7 ? handleTool : null} on:sidebarPinChange={handleSidebarPinChange}>
|
||||
<slot></slot>
|
||||
</SideBar>
|
||||
|
||||
@ -2,54 +2,51 @@ const color= "\x1b[1;35m";
|
||||
const underline= "\x1b[94;4m";
|
||||
const normal= "\x1b[0m";
|
||||
export const introMessage = [
|
||||
"+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+",
|
||||
"| |",
|
||||
"| WebVM is a virtual Linux environment running in the browser via WebAssembly |",
|
||||
"| |",
|
||||
"| WebVM is powered by the CheerpX virtualization engine, which enables safe, |",
|
||||
"| sandboxed client-side execution of x86 binaries, fully client-side |",
|
||||
"| |",
|
||||
"| CheerpX includes an x86-to-WebAssembly JIT compiler, a virtual block-based |",
|
||||
"| file system, and a Linux syscall emulator |",
|
||||
"| |",
|
||||
"| [News] Integrating Claude Computer Use in WebVM! |",
|
||||
"| |",
|
||||
"| " + underline + "https://labs.leaningtech.com/blog/webvm-claude" + normal + " |",
|
||||
"| |",
|
||||
"| [7 - 14 April] Don't miss our Hackathon! Check out the site for updates! |",
|
||||
"| |",
|
||||
"| " + underline + "https://cheerpx.io/hackathon" + normal + " |",
|
||||
"| |",
|
||||
"+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+",
|
||||
" ",
|
||||
" |\\__/,| (`\\",
|
||||
" _.|o o |_ ) )",
|
||||
"+(((~~~(((~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+",
|
||||
"| |",
|
||||
"| __ ________ ____ __ ____ __ |",
|
||||
"| \\ \\ / / ____| _ \\ \\ \\ / / \\/ | |",
|
||||
"| \\ \\ /\\ / /| |__ | |_) | \\ \\ / /| \\ / | |",
|
||||
"| \\ \\/ \\/ / | __| | _ < \\ \\/ / | |\\/| | |",
|
||||
"| \\ /\\ / | |____| |_) | \\ / | | | | |",
|
||||
"| \\/ \\/ |______|____/ \\/ |_| |_| |",
|
||||
"| |",
|
||||
"+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~+",
|
||||
"",
|
||||
" Welcome to WebVM. If unsure, try these examples:",
|
||||
" WebVM是一个通过WebAssembly在浏览器中运行的虚拟Linux环境",
|
||||
"",
|
||||
" 欢迎来到WebVM。我为你准备了一些案例，你可以试着执行下面的命令：",
|
||||
"",
|
||||
" python3 examples/python3/fibonacci.py ",
|
||||
" gcc -o helloworld examples/c/helloworld.c && ./helloworld",
|
||||
" objdump -d ./helloworld | less -M",
|
||||
" vim examples/c/helloworld.c",
|
||||
" curl --max-time 15 parrot.live # requires networking",
|
||||
""
|
||||
" curl --max-time 15 parrot.live # 需要配置网络",
|
||||
"",
|
||||
"本系统为Debian，root用户和user用户密码都是password"
|
||||
];
|
||||
export const errorMessage = [
|
||||
color + "CheerpX could not start" + normal,
|
||||
color + "CheerpX无法启动" + normal,
|
||||
"",
|
||||
"Check the DevTools console for more information",
|
||||
"查看DevTools控制台了解更多信息",
|
||||
"",
|
||||
"CheerpX is expected to work with recent desktop versions of Chrome, Edge, Firefox and Safari",
|
||||
"CheerpX一般与最新的桌面版Chrome、Edge、Firefox和Safari兼容",
|
||||
"",
|
||||
"Give it a try from a desktop version / another browser!",
|
||||
"试试桌面版本或其他浏览器吧！",
|
||||
"",
|
||||
"CheerpX internal error message is:",
|
||||
"CheerpX内部错误信息是：",
|
||||
""
|
||||
];
|
||||
export const unexpectedErrorMessage = [
|
||||
color + "WebVM encountered an unexpected error" + normal,
|
||||
color + "WebVM遇到意外错误" + normal,
|
||||
"",
|
||||
"Check the DevTools console for further information",
|
||||
"查看DevTools控制台以获取更多信息",
|
||||
"",
|
||||
"Please consider reporting a bug!",
|
||||
"请考虑报告bug！",
|
||||
"",
|
||||
"CheerpX internal error message is:",
|
||||
"CheerpX内部错误信息是：",
|
||||
""
|
||||
];
|
||||
|
||||
@ -13,5 +13,5 @@ function handleProcessCreated(processCount)
|
||||
</script>
|
||||
|
||||
<WebVM configObj={configObj} processCallback={handleProcessCreated} cacheId="blocks_terminal">
|
||||
<p>Looking for a complete desktop experience? Try the new <a class="underline" href="/alpine.html" target="_blank">Alpine Linux</a> graphical WebVM</p>
|
||||
<p>想要完整的桌面体验？ 你可以试试 <a class="underline" href="/alpine.html" target="_blank">Alpine Linux</a> 图形化WebVM（需要魔法）</p>
|
||||
</WebVM>
|
||||
|
||||
@ -13,5 +13,5 @@ function handleProcessCreated(processCount)
|
||||
</script>
|
||||
|
||||
<WebVM configObj={configObj} processCallback={handleProcessCreated} cacheId="blocks_alpine">
|
||||
<p>Looking for something different? Try the classic <a class="underline" href="/" target="_blank">Debian Linux</a> terminal-based WebVM</p>
|
||||
<p>返回传统的<a class="underline" href="/" target="_blank">Debian Linux</a> 终端WebVM</p>
|
||||
</WebVM>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user