Spaces:

HI7RAI
/

Mercedes

Running

App Files Files Community

HI7RAI commited on Jul 27, 2025

Commit

e7d9037

verified ·

1 Parent(s): 5fe64a9

Upload index.html with huggingface_hub

Browse files

Files changed (1) hide show

index.html +338 -19

index.html CHANGED Viewed

@@ -1,19 +1,338 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Protocol Buffers – FieldMask</title>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap">
+  <style>
+    :root {
+      --bg: #0d1117;
+      --surface: #161b22;
+      --border: #30363d;
+      --text: #c9d1d9;
+      --text-muted: #8b949e;
+      --accent: #58a6ff;
+      --code-bg: #0d1117;
+      --code-border: #30363d;
+      --mono: 'JetBrains Mono', monospace;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      font-family: 'Inter', sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      line-height: 1.7;
+      scroll-behavior: smooth;
+    }
+    header {
+      padding: 2rem 1rem;
+      border-bottom: 1px solid var(--border);
+      background: var(--surface);
+    }
+    header h1 {
+      margin: 0;
+      font-weight: 600;
+      font-size: clamp(1.5rem, 2.5vw, 2.2rem);
+    }
+    nav {
+      position: sticky;
+      top: 0;
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      z-index: 10;
+    }
+    nav ul {
+      display: flex;
+      gap: 1rem;
+      list-style: none;
+      margin: 0;
+      padding: .75rem 1rem;
+      overflow-x: auto;
+    }
+    nav a {
+      color: var(--text-muted);
+      text-decoration: none;
+      font-size: .875rem;
+      font-weight: 500;
+      white-space: nowrap;
+      transition: color .15s;
+    }
+    nav a:hover,
+    nav a:focus {
+      color: var(--accent);
+    }
+    main {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 2rem 1rem;
+    }
+    section {
+      scroll-margin-top: 4rem;
+    }
+    h2 {
+      margin: 2.5rem 0 1rem;
+      font-size: clamp(1.25rem, 2.2vw, 1.75rem);
+      font-weight: 600;
+      color: var(--text);
+      border-bottom: 1px solid var(--border);
+      padding-bottom: .25rem;
+    }
+    h3 {
+      margin: 1.5rem 0 .75rem;
+      font-size: 1.1rem;
+      font-weight: 600;
+      color: var(--text);
+    }
+    p, li {
+      color: var(--text-muted);
+      font-size: .95rem;
+    }
+    ul {
+      padding-left: 1.25rem;
+    }
+    code, pre {
+      font-family: var(--mono);
+      font-size: .875rem;
+    }
+    pre {
+      background: var(--code-bg);
+      border: 1px solid var(--code-border);
+      padding: 1rem;
+      border-radius: .375rem;
+      overflow-x: auto;
+      white-space: pre;
+    }
+    .highlight {
+      color: var(--accent);
+    }
+    details {
+      margin-top: 1rem;
+      border: 1px solid var(--border);
+      border-radius: .375rem;
+      background: var(--surface);
+    }
+    summary {
+      padding: .75rem 1rem;
+      cursor: pointer;
+      font-weight: 500;
+      outline: none;
+    }
+    summary:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: -2px;
+    }
+    details[open] pre {
+      margin: 0;
+      border: none;
+      border-top: 1px solid var(--border);
+      border-radius: 0;
+    }
+    .tabs {
+      display: flex;
+      gap: .5rem;
+      border-bottom: 1px solid var(--border);
+      margin-bottom: 1rem;
+    }
+    .tab {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      padding: .5rem .75rem;
+      cursor: pointer;
+      font-size: .875rem;
+      font-weight: 500;
+      border-bottom: 2px solid transparent;
+      transition: all .15s;
+    }
+    .tab.active,
+    .tab:hover {
+      color: var(--accent);
+      border-color: var(--accent);
+    }
+    .tab-content {
+      display: none;
+    }
+    .tab-content.active {
+      display: block;
+    }
+    @media (min-width: 600px) {
+      nav ul {
+        justify-content: center;
+      }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Protocol Buffers – Well-Known Types</h1>
+  </header>
+  <nav>
+    <ul>
+      <li><a href="#overview">Overview</a></li>
+      <li><a href="#projections">Field Masks in Projections</a></li>
+      <li><a href="#updates">Field Masks in Update Operations</a></li>
+      <li><a href="#json">JSON Encoding</a></li>
+      <li><a href="#oneof">Oneof Fields</a></li>
+      <li><a href="#verification">Field Mask Verification</a></li>
+    </ul>
+  </nav>
+  <main>
+    <section id="overview">
+      <h2>Overview</h2>
+      <p>
+        <code class="highlight">FieldMask</code> represents a set of symbolic field paths, for example:
+      </p>
+      <pre>paths: "f.a"
+paths: "f.b.d"</pre>
+      <p>
+        Here <code>f</code> represents a field in some root message, <code>a</code> and <code>b</code>
+        fields in the message found in <code>f</code>, and <code>d</code> a field found in the
+        message in <code>f.b</code>.
+      </p>
+    </section>
+    <section id="projections">
+      <h2>Field Masks in Projections</h2>
+      <p>
+        When used in the context of a projection, a response message or
+        sub-message is filtered by the API to only contain those fields as
+        specified in the mask.
+      </p>
+      <details>
+        <summary>Example</summary>
+        <pre>f {
+  a : 22
+  b {
+    d : 1
+    x : 2
+  }
+  y : 13
+}
+z: 8</pre>
+        <p>The result will <strong>not</strong> contain specific values for fields <code>x,y</code> and <code>z</code>:</p>
+        <pre>f {
+  a : 22
+  b {
+    d : 1
+  }
+}</pre>
+      </details>
+    </section>
+    <section id="updates">
+      <h2>Field Masks in Update Operations</h2>
+      <p>
+        A field mask in update operations specifies which fields of the
+        targeted resource are going to be updated. The API is required
+        to only change the values of the fields as specified in the mask
+        and leave the others untouched.
+      </p>
+      <details>
+        <summary>Example</summary>
+        <p>Given the target message:</p>
+        <pre>f {
+  b {
+    d: 1
+    x: 2
+  }
+  c: [1]
+}</pre>
+        <p>And an update message:</p>
+        <pre>f {
+  b {
+    d: 10
+  }
+  c: [2]
+}</pre>
+        <p>With the field mask:</p>
+        <pre>paths: ["f.b", "f.c"]</pre>
+        <p>The result will be:</p>
+        <pre>f {
+  b {
+    d: 10
+    x: 2
+  }
+  c: [1, 2]
+}</pre>
+      </details>
+    </section>
+    <section id="json">
+      <h2>JSON Encoding of Field Masks</h2>
+      <p>
+        In JSON, a field mask is encoded as a single string where paths are
+        separated by a comma. Fields name in each path are converted
+        to/from lower-camel naming conventions.
+      </p>
+      <div class="tabs">
+        <button class="tab active" data-tab="proto">Proto</button>
+        <button class="tab" data-tab="json">JSON</button>
+      </div>
+      <div class="tab-content active" id="proto">
+        <pre>mask {
+  paths: "user.display_name"
+  paths: "photo"
+}</pre>
+      </div>
+      <div class="tab-content" id="json">
+        <pre>{
+  mask: "user.displayName,photo"
+}</pre>
+      </div>
+    </section>
+    <section id="oneof">
+      <h2>Field Masks and Oneof Fields</h2>
+      <p>
+        Field masks treat fields in oneofs just as regular fields. Consider the
+        following message:
+      </p>
+      <pre>message SampleMessage {
+  oneof test_oneof {
+    string name = 4;
+    SubMessage sub_message = 9;
+  }
+}</pre>
+      <p>
+        The field mask can be:
+      </p>
+      <pre>mask {
+  paths: "name"
+}</pre>
+      <p>or</p>
+      <pre>mask {
+  paths: "sub_message"
+}</pre>
+      <p>
+        Note that oneof type names (<code>test_oneof</code>) cannot be used in
+        paths.
+      </p>
+    </section>
+    <section id="verification">
+      <h2>Field Mask Verification</h2>
+      <p>
+        The implementation of any API method which has a <code>FieldMask</code> type field in the
+        request should verify the included field paths, and return an
+        <code>INVALID_ARGUMENT</code> error if any path is unmappable.
+      </p>
+    </section>
+  </main>
+  <script>
+    // Tab switching
+    document.querySelectorAll('.tab').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.tab, .tab-content').forEach(el => el.classList.remove('active'));
+        btn.classList.add('active');
+        document.getElementById(btn.dataset.tab).classList.add('active');
+      });
+    });
+  </script>
+</body>
+</html>