Spaces:

duqing026
/

mini-lang

Running

App Files Files Community

Trae Assistant commited on Feb 23

Commit

602c51e

0 Parent(s):

feat: complete hf spaces configuration with interactive demo

Browse files

Files changed (5) hide show

README.md +8 -0
example.mini +5 -0
index.html +284 -0
main.js +12 -0
mini_lang.js +389 -0

README.md ADDED Viewed

	@@ -0,0 +1,8 @@

+---
+title: Mini Lang
+emoji: 💻
+colorFrom: blue
+colorTo: indigo
+sdk: static
+pinned: false
+---

example.mini ADDED Viewed

	@@ -0,0 +1,5 @@

+let x = 1 + 2 * 3;
+let y = (x - 2) / 2;
+print x;
+print y;
+print x + y * 10;

index.html ADDED Viewed

	@@ -0,0 +1,284 @@

+<!doctype html>
+<html lang="zh-CN">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Mini Lang - 功能展示</title>
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background-color: #0f172a;
+      color: #e5e7eb;
+      line-height: 1.6;
+    }
+    main {
+      max-width: 960px;
+      margin: 0 auto;
+      padding: 32px 20px 48px;
+    }
+    header {
+      margin-bottom: 32px;
+      text-align: left;
+    }
+    h1 {
+      margin: 0 0 8px;
+      font-size: 32px;
+      color: #f9fafb;
+    }
+    h2 {
+      margin-top: 32px;
+      margin-bottom: 12px;
+      font-size: 22px;
+      color: #e5e7eb;
+    }
+    p {
+      margin: 4px 0 12px;
+      color: #cbd5f5;
+    }
+    .tagline {
+      color: #9ca3af;
+      font-size: 14px;
+    }
+    .section-card {
+      border-radius: 12px;
+      border: 1px solid rgba(148, 163, 184, 0.35);
+      background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 55%),
+                  radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.18), transparent 55%),
+                  rgba(15, 23, 42, 0.9);
+      padding: 18px 16px 16px;
+      margin-bottom: 18px;
+    }
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(148, 163, 184, 0.4);
+      background-color: rgba(15, 23, 42, 0.8);
+      color: #e5e7eb;
+      font-size: 12px;
+      margin-top: 8px;
+    }
+    .badge span {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a);
+    }
+    ul {
+      padding-left: 20px;
+      margin: 6px 0 0;
+      color: #d1d5db;
+    }
+    code {
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      background-color: rgba(15, 23, 42, 0.9);
+      padding: 1px 4px;
+      border-radius: 4px;
+      font-size: 13px;
+    }
+    pre {
+      margin: 8px 0 0;
+      padding: 10px 12px;
+      border-radius: 10px;
+      background-color: #020617;
+      color: #e5e7eb;
+      overflow-x: auto;
+      font-size: 13px;
+      border: 1px solid rgba(30, 64, 175, 0.7);
+    }
+    pre code {
+      background: none;
+      padding: 0;
+    }
+    .pill-label {
+      display: inline-block;
+      font-size: 12px;
+      color: #a5b4fc;
+      margin-bottom: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+    }
+    .grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+      gap: 16px;
+      align-items: flex-start;
+    }
+    .grid-item {
+      min-width: 0;
+    }
+    .output-line {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 3px 8px;
+      border-radius: 999px;
+      background: rgba(15, 23, 42, 0.85);
+      font-size: 12px;
+      color: #e5e7eb;
+    }
+    .output-line span {
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 999px;
+      background: radial-gradient(circle at 30% 30%, #22c55e, #16a34a);
+    }
+    .footer {
+      margin-top: 28px;
+      font-size: 12px;
+      color: #6b7280;
+      text-align: right;
+    }
+    @media (max-width: 720px) {
+      main {
+        padding: 20px 16px 32px;
+      }
+      h1 {
+        font-size: 26px;
+      }
+      .grid {
+        grid-template-columns: minmax(0, 1fr);
+      }
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <header>
+      <h1>Mini Lang 自定义语言</h1>
+      <p class="tagline">一个用 JavaScript 实现的微型脚本语言，支持变量、表达式与打印输出。</p>
+      <div class="badge">
+        <span></span>
+        <div>命令行运行 · Hugging Face Spaces 静态展示</div>
+      </div>
+    </header>
+    <section class="section-card">
+      <div class="pill-label">语言特性概览</div>
+      <h2>支持的语法</h2>
+      <p>Mini Lang 目前专注于表达式计算与简单的脚本结构：</p>
+      <ul>
+        <li>数字字面量，例如 <code>1</code>、<code>3.14</code></li>
+        <li>变量声明：<code>let x = 表达式;</code></li>
+        <li>四则运算：<code>+</code>、<code>-</code>、<code>*</code>、<code>/</code>，支持括号改变优先级</li>
+        <li>打印语句：<code>print 表达式;</code> 会在控制台输出值</li>
+        <li>语句之间用分号结尾：<code>;</code></li>
+      </ul>
+    </section>
+    <section class="section-card">
+      <div class="pill-label">在线体验</div>
+      <h2>在线运行 Mini Lang</h2>
+      <p>在下方输入框编写 Mini Lang 代码，点击运行查看结果：</p>
+      <div class="grid">
+        <div class="grid-item">
+          <textarea id="code-input" style="width: 100%; height: 200px; background: #020617; color: #e5e7eb; border: 1px solid rgba(30, 64, 175, 0.7); border-radius: 8px; padding: 12px; font-family: monospace;">let x = 10;
+let y = 20;
+print x + y;
+print x * y;
+</textarea>
+          <button onclick="runCode()" style="margin-top: 10px; padding: 8px 16px; background: #3b82f6; color: white; border: none; border-radius: 6px; cursor: pointer;">运行代码</button>
+        </div>
+        <div class="grid-item">
+          <pre id="output-area" style="height: 200px; overflow-y: auto;">Waiting for output...</pre>
+        </div>
+      </div>
+      <script src="mini_lang.js"></script>
+      <script>
+        function runCode() {
+          const source = document.getElementById('code-input').value;
+          const outputArea = document.getElementById('output-area');
+          outputArea.innerText = ''; // 清空输出
+          try {
+            // 重定向输出到页面
+            if (window.MiniLang) {
+                window.MiniLang.run(source, (val) => {
+                outputArea.innerText += val + '\n';
+                });
+            } else {
+                 outputArea.innerText = 'Error: MiniLang engine not loaded.';
+            }
+          } catch (e) {
+            outputArea.innerText += 'Error: ' + e.message;
+          }
+        }
+      </script>
+    </section>
+    <section class="section-card">
+      <div class="pill-label">最小可运行示例</div>
+      <h2>示例程序与运行效果</h2>
+      <div class="grid">
+        <div class="grid-item">
+          <p>示例源文件 <code>example.mini</code>：</p>
+          <pre><code>let x = 1 + 2 * 3;
+let y = (x - 2) / 2;
+print x;
+print y;
+print x + y * 10;</code></pre>
+        </div>
+        <div class="grid-item">
+          <p>在命令行运行后输出：</p>
+          <pre><code>7
+2.5
+32</code></pre>
+          <p>
+            其中：
+          </p>
+          <ul>
+            <li><code>x = 1 + 2 * 3 = 7</code></li>
+            <li><code>y = (x - 2) / 2 = 2.5</code></li>
+            <li>最后一行输出 <code>7 + 2.5 * 10 = 32</code></li>
+          </ul>
+        </div>
+      </div>
+    </section>
+    <section class="section-card">
+      <div class="pill-label">本地命令行使用方式</div>
+      <h2>如何在本地运行 Mini Lang</h2>
+      <p>本项目使用 Node.js 作为运行时，只依赖内置模块 <code>fs</code> 与 <code>path</code>：</p>
+      <pre><code># 进入项目目录
+cd mini-lang
+# 使用默认示例程序运行
+node main.js
+# 或者指定自己的脚本文件
+node main.js your_program.mini</code></pre>
+      <p>在入口文件 <code>main.js</code> 中，会读取传入的脚本文件内容，并调用解释器执行。</p>
+    </section>
+    <section class="section-card">
+      <div class="pill-label">部署到 Hugging Face Spaces</div>
+      <h2>在 Spaces 上展示</h2>
+      <p>
+        将本项目作为 <strong>Static</strong> 类型的 Space 使用时，只需要把整个
+        <code>mini-lang</code> 文件夹推送到
+        <code>hf026:spaces/duqing026/mini-lang</code> 对应的仓库即可。
+      </p>
+      <p>此页面 <code>index.html</code> 会作为默认展示入口，用于说明 Mini Lang 的语法与示例。</p>
+      <pre><code># 在 mini-lang 目录下（本地已经配置好 huggingface 的 ssh 别名 hf026）
+git init
+git add .
+git commit -m "chore: add mini-lang demo page"
+git push hf026:spaces/duqing026/mini-lang main</code></pre>
+      <p>推送成功后，在浏览器访问对应的 Hugging Face Space，即可看到本页面。</p>
+    </section>
+    <div class="footer">
+      Mini Lang · 仅用于教学与功能演示
+    </div>
+  </main>
+</body>
+</html>

main.js ADDED Viewed

	@@ -0,0 +1,12 @@

+const fs = require("fs");
+const path = require("path");
+const { run } = require("./mini_lang");
+function main() {
+  const filePath = process.argv[2] || path.join(__dirname, "example.mini");
+  const source = fs.readFileSync(filePath, "utf8");
+  console.log("运行自定义语言程序，源文件:", filePath);
+  run(source);
+}
+main();

mini_lang.js ADDED Viewed

	@@ -0,0 +1,389 @@

+const TokenType = {
+  NUMBER: "NUMBER",
+  IDENT: "IDENT",
+  LET: "LET",
+  PRINT: "PRINT",
+  EQUAL: "EQUAL",
+  PLUS: "PLUS",
+  MINUS: "MINUS",
+  STAR: "STAR",
+  SLASH: "SLASH",
+  SEMICOLON: "SEMICOLON",
+  LPAREN: "LPAREN",
+  RPAREN: "RPAREN",
+  EOF: "EOF",
+};
+const keywords = {
+  let: TokenType.LET,
+  print: TokenType.PRINT,
+};
+class Token {
+  constructor(type, lexeme, literal, position) {
+    this.type = type;
+    this.lexeme = lexeme;
+    this.literal = literal;
+    this.position = position;
+  }
+}
+class Lexer {
+  constructor(source) {
+    this.source = source;
+    this.tokens = [];
+    this.start = 0;
+    this.current = 0;
+    this.line = 1;
+    this.column = 1;
+  }
+  scanTokens() {
+    while (!this.isAtEnd()) {
+      this.start = this.current;
+      this.scanToken();
+    }
+    this.tokens.push(new Token(TokenType.EOF, "", null, { line: this.line, column: this.column }));
+    return this.tokens;
+  }
+  isAtEnd() {
+    return this.current >= this.source.length;
+  }
+  scanToken() {
+    const c = this.advance();
+    if (this.isDigit(c)) {
+      this.number();
+      return;
+    }
+    if (this.isAlpha(c)) {
+      this.identifier();
+      return;
+    }
+    switch (c) {
+      case "+":
+        this.addToken(TokenType.PLUS);
+        break;
+      case "-":
+        this.addToken(TokenType.MINUS);
+        break;
+      case "*":
+        this.addToken(TokenType.STAR);
+        break;
+      case "/":
+        if (this.match("/")) {
+          while (!this.isAtEnd() && this.peek() !== "\n") {
+            this.advance();
+          }
+        } else {
+          this.addToken(TokenType.SLASH);
+        }
+        break;
+      case "=":
+        this.addToken(TokenType.EQUAL);
+        break;
+      case ";":
+        this.addToken(TokenType.SEMICOLON);
+        break;
+      case "(":
+        this.addToken(TokenType.LPAREN);
+        break;
+      case ")":
+        this.addToken(TokenType.RPAREN);
+        break;
+      case " ":
+      case "\r":
+      case "\t":
+        break;
+      case "\n":
+        this.line += 1;
+        this.column = 1;
+        break;
+      default:
+        throw new Error("无法识别的字符: '" + c + "' 在第 " + this.line + " 行");
+    }
+  }
+  advance() {
+    const ch = this.source[this.current];
+    this.current += 1;
+    this.column += 1;
+    return ch;
+  }
+  addToken(type, literal = null) {
+    const text = this.source.slice(this.start, this.current);
+    this.tokens.push(new Token(type, text, literal, { line: this.line, column: this.column }));
+  }
+  match(expected) {
+    if (this.isAtEnd()) return false;
+    if (this.source[this.current] !== expected) return false;
+    this.current += 1;
+    this.column += 1;
+    return true;
+  }
+  peek() {
+    if (this.isAtEnd()) return "\0";
+    return this.source[this.current];
+  }
+  isDigit(c) {
+    return c >= "0" && c <= "9";
+  }
+  isAlpha(c) {
+    return (c >= "a" && c <= "z") || (c >= "A" && c <= "Z") || c === "_";
+  }
+  isAlphaNumeric(c) {
+    return this.isAlpha(c) || this.isDigit(c);
+  }
+  number() {
+    while (this.isDigit(this.peek())) {
+      this.advance();
+    }
+    if (this.peek() === "." && this.isDigit(this.peekNext())) {
+      this.advance();
+      while (this.isDigit(this.peek())) {
+        this.advance();
+      }
+    }
+    const text = this.source.slice(this.start, this.current);
+    const value = Number(text);
+    this.addToken(TokenType.NUMBER, value);
+  }
+  peekNext() {
+    if (this.current + 1 >= this.source.length) return "\0";
+    return this.source[this.current + 1];
+  }
+  identifier() {
+    while (this.isAlphaNumeric(this.peek())) {
+      this.advance();
+    }
+    const text = this.source.slice(this.start, this.current);
+    const type = keywords[text] || TokenType.IDENT;
+    this.addToken(type);
+  }
+}
+class Parser {
+  constructor(tokens) {
+    this.tokens = tokens;
+    this.current = 0;
+  }
+  parseProgram() {
+    const statements = [];
+    while (!this.isAtEnd()) {
+      statements.push(this.statement());
+    }
+    return { type: "Program", statements };
+  }
+  statement() {
+    if (this.match(TokenType.LET)) return this.letStatement();
+    if (this.match(TokenType.PRINT)) return this.printStatement();
+    const expr = this.expression();
+    this.consume(TokenType.SEMICOLON, "期望在表达式后面出现分号");
+    return { type: "ExprStmt", expression: expr };
+  }
+  letStatement() {
+    const nameToken = this.consume(TokenType.IDENT, "let 后面需要变量名");
+    this.consume(TokenType.EQUAL, "变量声明需要等号");
+    const initializer = this.expression();
+    this.consume(TokenType.SEMICOLON, "变量声明后需要分号");
+    return { type: "LetStmt", name: nameToken.lexeme, initializer };
+  }
+  printStatement() {
+    const value = this.expression();
+    this.consume(TokenType.SEMICOLON, "print 后需要分号");
+    return { type: "PrintStmt", expression: value };
+  }
+  expression() {
+    return this.term();
+  }
+  term() {
+    let expr = this.factor();
+    while (this.match(TokenType.PLUS) || this.match(TokenType.MINUS)) {
+      const operator = this.previous();
+      const right = this.factor();
+      expr = { type: "Binary", left: expr, operator: operator.type, right };
+    }
+    return expr;
+  }
+  factor() {
+    let expr = this.unary();
+    while (this.match(TokenType.STAR) || this.match(TokenType.SLASH)) {
+      const operator = this.previous();
+      const right = this.unary();
+      expr = { type: "Binary", left: expr, operator: operator.type, right };
+    }
+    return expr;
+  }
+  unary() {
+    if (this.match(TokenType.MINUS)) {
+      const operator = this.previous();
+      const right = this.unary();
+      return { type: "Unary", operator: operator.type, right };
+    }
+    return this.primary();
+  }
+  primary() {
+    if (this.match(TokenType.NUMBER)) {
+      return { type: "Literal", value: this.previous().literal };
+    }
+    if (this.match(TokenType.IDENT)) {
+      return { type: "Variable", name: this.previous().lexeme };
+    }
+    if (this.match(TokenType.LPAREN)) {
+      const expr = this.expression();
+      this.consume(TokenType.RPAREN, "缺少右括号");
+      return expr;
+    }
+    throw new Error("无法解析的表达式起始符号");
+  }
+  match(type) {
+    if (this.check(type)) {
+      this.advance();
+      return true;
+    }
+    return false;
+  }
+  consume(type, message) {
+    if (this.check(type)) return this.advance();
+    throw new Error(message);
+  }
+  check(type) {
+    if (this.isAtEnd()) return false;
+    return this.peek().type === type;
+  }
+  advance() {
+    if (!this.isAtEnd()) this.current += 1;
+    return this.previous();
+  }
+  isAtEnd() {
+    return this.peek().type === TokenType.EOF;
+  }
+  peek() {
+    return this.tokens[this.current];
+  }
+  previous() {
+    return this.tokens[this.current - 1];
+  }
+}
+class Interpreter {
+  constructor() {
+    this.globals = Object.create(null);
+  }
+  execute(program, outputCallback = console.log) {
+    for (const stmt of program.statements) {
+      this.executeStatement(stmt, outputCallback);
+    }
+  }
+  executeStatement(stmt, outputCallback) {
+    switch (stmt.type) {
+      case "LetStmt":
+        this.globals[stmt.name] = this.evaluate(stmt.initializer);
+        break;
+      case "PrintStmt":
+        const value = this.evaluate(stmt.expression);
+        outputCallback(value);
+        break;
+      case "ExprStmt":
+        this.evaluate(stmt.expression);
+        break;
+      default:
+        throw new Error("未知语句类型: " + stmt.type);
+    }
+  }
+  evaluate(expr) {
+    switch (expr.type) {
+      case "Literal":
+        return expr.value;
+      case "Variable":
+        if (Object.prototype.hasOwnProperty.call(this.globals, expr.name)) {
+          return this.globals[expr.name];
+        }
+        throw new Error("未定义的变量: " + expr.name);
+      case "Unary":
+        const right = this.evaluate(expr.right);
+        if (expr.operator === TokenType.MINUS) {
+          this.ensureNumber(right);
+          return -right;
+        }
+        throw new Error("未知一元运算符");
+      case "Binary":
+        const left = this.evaluate(expr.left);
+        const r = this.evaluate(expr.right);
+        if (expr.operator === TokenType.PLUS) {
+          this.ensureNumber(left);
+          this.ensureNumber(r);
+          return left + r;
+        }
+        if (expr.operator === TokenType.MINUS) {
+          this.ensureNumber(left);
+          this.ensureNumber(r);
+          return left - r;
+        }
+        if (expr.operator === TokenType.STAR) {
+          this.ensureNumber(left);
+          this.ensureNumber(r);
+          return left * r;
+        }
+        if (expr.operator === TokenType.SLASH) {
+          this.ensureNumber(left);
+          this.ensureNumber(r);
+          return left / r;
+        }
+        throw new Error("未知二元运算符");
+      default:
+        throw new Error("未知表达式类型: " + expr.type);
+    }
+  }
+  ensureNumber(value) {
+    if (typeof value !== "number" || Number.isNaN(value)) {
+      throw new Error("期望数字类型");
+    }
+  }
+}
+function run(source, outputCallback = console.log) {
+  const lexer = new Lexer(source);
+  const tokens = lexer.scanTokens();
+  const parser = new Parser(tokens);
+  const program = parser.parseProgram();
+  const interpreter = new Interpreter();
+  interpreter.execute(program, outputCallback);
+}
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = { run };
+} else {
+  // 浏览器环境
+  window.MiniLang = { run };
+}