Spaces:

feifeinoban
/

shell

Running

App Files Files Community

feifeinoban commited on Oct 7, 2025

Commit

1e848b8

1 Parent(s): c3c15e0

Fix image path for Gradio rendering

Browse files

Files changed (1) hide show

index.html +374 -292

index.html CHANGED Viewed

@@ -3,28 +3,170 @@
 <head>
   <meta charset="utf-8">
   <meta name="description"
-        content="Deformable Neural Radiance Fields creates free-viewpoint portraits (nerfies) from casually captured videos.">
-  <meta name="keywords" content="Nerfies, D-NeRF, NeRF">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Nerfies: Deformable Neural Radiance Fields</title>
   <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
         rel="stylesheet">
-  <link rel="stylesheet" href="./static/css/bulma.min.css">
-  <link rel="stylesheet" href="./static/css/bulma-carousel.min.css">
-  <link rel="stylesheet" href="./static/css/bulma-slider.min.css">
-  <link rel="stylesheet" href="./static/css/fontawesome.all.min.css">
   <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
-  <link rel="stylesheet" href="./static/css/index.css">
-  <link rel="icon" href="./static/images/favicon.svg">
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-  <script defer src="./static/js/fontawesome.all.min.js"></script>
-  <script src="./static/js/bulma-carousel.min.js"></script>
-  <script src="./static/js/bulma-slider.min.js"></script>
-  <script src="./static/js/index.js"></script>
 </head>
 <body>
@@ -33,39 +175,29 @@
     <div class="container is-max-desktop">
       <div class="columns is-centered">
         <div class="column has-text-centered">
-          <h1 class="title is-1 publication-title">Nerfies: Deformable Neural Radiance Fields</h1>
           <div class="is-size-5 publication-authors">
             <span class="author-block">
-              <a href="https://keunhong.com" target="_blank">Keunhong Park</a><sup>1</sup>,</span>
-            <span class="author-block">
-              <a href="https://utkarshsinha.com" target="_blank">Utkarsh Sinha</a><sup>2</sup>,</span>
-            <span class="author-block">
-              <a href="https://jonbarron.info" target="_blank">Jonathan T. Barron</a><sup>2</sup>,
-            </span>
             <span class="author-block">
-              <a href="http://sofienbouaziz.com" target="_blank">Sofien Bouaziz</a><sup>2</sup>,
-            </span>
-            <span class="author-block">
-              <a href="https://www.danbgoldman.com" target="_blank">Dan B Goldman</a><sup>2</sup>,
-            </span>
             <span class="author-block">
-              <a href="https://homes.cs.washington.edu/~seitz/" target="_blank">Steven M. Seitz</a><sup>1,2</sup>,
             </span>
             <span class="author-block">
-              <a href="http://www.ricardomartinbrualla.com" target="_blank">Ricardo Martin-Brualla</a><sup>2</sup>
             </span>
           </div>
           <div class="is-size-5 publication-authors">
-            <span class="author-block"><sup>1</sup>University of Washington,</span>
-            <span class="author-block"><sup>2</sup>Google Research</span>
           </div>
           <div class="column has-text-centered">
             <div class="publication-links">
               <!-- PDF Link. -->
               <span class="link-block">
-                <a href="https://arxiv.org/pdf/2011.12948" target="_blank"
                    class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                       <i class="fas fa-file-pdf"></i>
@@ -74,7 +206,7 @@
                 </a>
               </span>
               <span class="link-block">
-                <a href="https://arxiv.org/abs/2011.12948" target="_blank"
                    class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                       <i class="ai ai-arxiv"></i>
@@ -82,19 +214,9 @@
                   <span>arXiv</span>
                 </a>
               </span>
-              <!-- Video Link. -->
-              <span class="link-block">
-                <a href="https://www.youtube.com/watch?v=MrKrnHhk8IA" target="_blank"
-                   class="external-link button is-normal is-rounded is-dark">
-                  <span class="icon">
-                      <i class="fab fa-youtube"></i>
-                  </span>
-                  <span>Video</span>
-                </a>
-              </span>
               <!-- Code Link. -->
               <span class="link-block">
-                <a href="https://github.com/google/nerfies" target="_blank"
                    class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                       <i class="fab fa-github"></i>
@@ -104,15 +226,15 @@
               </span>
               <!-- Dataset Link. -->
               <span class="link-block">
-                <a href="https://github.com/google/nerfies/releases/tag/0.1" target="_blank"
                    class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                       <i class="far fa-images"></i>
                   </span>
-                  <span>Data</span>
                   </a>
             </div>
           </div>
         </div>
       </div>
@@ -122,314 +244,274 @@
 <section class="hero teaser">
   <div class="container is-max-desktop">
-    <div class="hero-body">
-      <video id="teaser" autoplay muted loop playsinline height="100%">
-        <source src="./static/videos/teaser.mp4"
-                type="video/mp4">
-      </video>
-      <h2 class="subtitle has-text-centered">
-        <span class="dnerf">Nerfies</span> turns selfie videos from your phone into
-        free-viewpoint
-        portraits.
       </h2>
-    </div>
-  </div>
-</section>
-<section class="hero is-light is-small">
-  <div class="hero-body">
-    <div class="container">
-      <div id="results-carousel" class="carousel results-carousel">
-        <div class="item item-steve">
-          <video poster="" id="steve" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/steve.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-chair-tp">
-          <video poster="" id="chair-tp" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/chair-tp.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-shiba">
-          <video poster="" id="shiba" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/shiba.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-fullbody">
-          <video poster="" id="fullbody" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/fullbody.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-blueshirt">
-          <video poster="" id="blueshirt" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/blueshirt.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-mask">
-          <video poster="" id="mask" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/mask.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-coffee">
-          <video poster="" id="coffee" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/coffee.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <div class="item item-toby">
-          <video poster="" id="toby" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/toby2.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
       </div>
     </div>
   </div>
 </section>
 <section class="section">
   <div class="container is-max-desktop">
     <!-- Abstract. -->
     <div class="columns is-centered has-text-centered">
       <div class="column is-four-fifths">
         <h2 class="title is-3">Abstract</h2>
-        <div class="content has-text-justified">
-          <p>
-            We present the first method capable of photorealistically reconstructing a non-rigidly
-            deforming scene using photos/videos captured casually from mobile phones.
-          </p>
-          <p>
-            Our approach augments neural radiance fields
-            (NeRF) by optimizing an
-            additional continuous volumetric deformation field that warps each observed point into a
-            canonical 5D NeRF.
-            We observe that these NeRF-like deformation fields are prone to local minima, and
-            propose a coarse-to-fine optimization method for coordinate-based models that allows for
-            more robust optimization.
-            By adapting principles from geometry processing and physical simulation to NeRF-like
-            models, we propose an elastic regularization of the deformation field that further
-            improves robustness.
-          </p>
-          <p>
-            We show that <span class="dnerf">Nerfies</span> can turn casually captured selfie
-            photos/videos into deformable NeRF
-            models that allow for photorealistic renderings of the subject from arbitrary
-            viewpoints, which we dub <i>"nerfies"</i>. We evaluate our method by collecting data
-            using a
-            rig with two mobile phones that take time-synchronized photos, yielding train/validation
-            images of the same pose at different viewpoints. We show that our method faithfully
-            reconstructs non-rigidly deforming scenes and reproduces unseen views with high
-            fidelity.
-          </p>
         </div>
       </div>
     </div>
     <!--/ Abstract. -->
-    <!-- Paper video. -->
-    <div class="columns is-centered has-text-centered">
-      <div class="column is-four-fifths">
-        <h2 class="title is-3">Video</h2>
-        <div class="publication-video">
-          <iframe src="https://www.youtube.com/embed/MrKrnHhk8IA?rel=0&amp;showinfo=0"
-                  frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
         </div>
       </div>
     </div>
-    <!--/ Paper video. -->
   </div>
 </section>
 <section class="section">
   <div class="container is-max-desktop">
     <div class="columns is-centered">
-      <!-- Visual Effects. -->
-      <div class="column">
-        <div class="content">
-          <h2 class="title is-3">Visual Effects</h2>
-          <p>
-            Using <i>nerfies</i> you can create fun visual effects. This Dolly zoom effect
-            would be impossible without nerfies since it would require going through a wall.
-          </p>
-          <video id="dollyzoom" autoplay controls muted loop playsinline height="100%">
-            <source src="./static/videos/dollyzoom-stacked.mp4"
-                    type="video/mp4">
-          </video>
         </div>
-      </div>
-      <!--/ Visual Effects. -->
-      <!-- Matting. -->
-      <div class="column">
-        <h2 class="title is-3">Matting</h2>
-        <div class="columns is-centered">
-          <div class="column content">
-            <p>
-              As a byproduct of our method, we can also solve the matting problem by ignoring
-              samples that fall outside of a bounding box during rendering.
-            </p>
-            <video id="matting-video" controls playsinline height="100%">
-              <source src="./static/videos/matting.mp4"
-                      type="video/mp4">
-            </video>
           </div>
         </div>
       </div>
     </div>
-    <!--/ Matting. -->
-    <!-- Animation. -->
     <div class="columns is-centered">
-      <div class="column is-full-width">
-        <h2 class="title is-3">Animation</h2>
-        <!-- Interpolating. -->
-        <h3 class="title is-4">Interpolating states</h3>
-        <div class="content has-text-justified">
-          <p>
-            We can also animate the scene by interpolating the deformation latent codes of two input
-            frames. Use the slider here to linearly interpolate between the left frame and the right
-            frame.
-          </p>
         </div>
-        <div class="columns is-vcentered interpolation-panel">
-          <div class="column is-3 has-text-centered">
-            <img src="./static/images/interpolate_start.jpg"
-                 class="interpolation-image"
-                 alt="Interpolate start reference image."/>
-            <p>Start Frame</p>
-          </div>
-          <div class="column interpolation-video-column">
-            <div id="interpolation-image-wrapper">
-              Loading...
-            </div>
-            <input class="slider is-fullwidth is-large is-info"
-                   id="interpolation-slider"
-                   step="1" min="0" max="100" value="0" type="range">
-          </div>
-          <div class="column is-3 has-text-centered">
-            <img src="./static/images/interpolate_end.jpg"
-                 class="interpolation-image"
-                 alt="Interpolation end reference image."/>
-            <p class="is-bold">End Frame</p>
-          </div>
         </div>
-        <br/>
-        <!--/ Interpolating. -->
-        <!-- Re-rendering. -->
-        <h3 class="title is-4">Re-rendering the input video</h3>
-        <div class="content has-text-justified">
-          <p>
-            Using <span class="dnerf">Nerfies</span>, you can re-render a video from a novel
-            viewpoint such as a stabilized camera by playing back the training deformations.
           </p>
         </div>
-        <div class="content has-text-centered">
-          <video id="replay-video"
-                 controls
-                 muted
-                 preload
-                 playsinline
-                 width="75%">
-            <source src="./static/videos/replay.mp4"
-                    type="video/mp4">
-          </video>
-        </div>
-        <!--/ Re-rendering. -->
       </div>
     </div>
-    <!--/ Animation. -->
-    <!-- Concurrent Work. -->
     <div class="columns is-centered">
-      <div class="column is-full-width">
-        <h2 class="title is-3">Related Links</h2>
-        <div class="content has-text-justified">
-          <p>
-            There's a lot of excellent work that was introduced around the same time as ours.
-          </p>
-          <p>
-            <a href="https://arxiv.org/abs/2104.09125" target="_blank">Progressive Encoding for Neural Optimization</a> introduces an idea similar to our windowed position encoding for coarse-to-fine optimization.
-          </p>
-          <p>
-            <a href="https://www.albertpumarola.com/research/D-NeRF/index.html" target="_blank">D-NeRF</a> and <a href="https://gvv.mpi-inf.mpg.de/projects/nonrigid_nerf/" target="_blank">NR-NeRF</a>
-            both use deformation fields to model non-rigid scenes.
-          </p>
-          <p>
-            Some works model videos with a NeRF by directly modulating the density, such as <a href="https://video-nerf.github.io/" target="_blank">Video-NeRF</a>, <a href="https://www.cs.cornell.edu/~zl548/NSFF/" target="_blank">NSFF</a>, and <a href="https://neural-3d-video.github.io/" target="_blank">DyNeRF</a>
-          </p>
-          <p>
-            There are probably many more by the time you are reading this. Check out <a href="https://dellaert.github.io/NeRF/" target="_blank">Frank Dellart's survey on recent NeRF papers</a>, and <a href="https://github.com/yenchenlin/awesome-NeRF" target="_blank">Yen-Chen Lin's curated list of NeRF papers</a>.
-          </p>
         </div>
       </div>
     </div>
-    <!--/ Concurrent Work. -->
   </div>
 </section>
 <section class="section" id="BibTeX">
   <div class="container is-max-desktop content">
     <h2 class="title">BibTeX</h2>
-    <pre><code>@article{park2021nerfies,
-  author    = {Park, Keunhong and Sinha, Utkarsh and Barron, Jonathan T. and Bouaziz, Sofien and Goldman, Dan B and Seitz, Steven M. and Martin-Brualla, Ricardo},
-  title     = {Nerfies: Deformable Neural Radiance Fields},
-  journal   = {ICCV},
-  year      = {2021},
 }</code></pre>
   </div>
 </section>
 <footer class="footer">
   <div class="container">
     <div class="content has-text-centered">
-      <a class="icon-link" target="_blank"
-         href="./static/videos/nerfies_paper.pdf">
-        <i class="fas fa-file-pdf"></i>
-      </a>
-      <a class="icon-link" href="https://github.com/keunhong" target="_blank" class="external-link" disabled>
-        <i class="fab fa-github"></i>
-      </a>
-    </div>
-    <div class="columns is-centered">
-      <div class="column is-8">
-        <div class="content">
-          <p>
-            This website is licensed under a <a rel="license" target="_blank"
-                                                href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
-            Commons Attribution-ShareAlike 4.0 International License</a>.
-          </p>
-          <p>
-            This means you are free to borrow the <a target="_blank"
-              href="https://github.com/nerfies/nerfies.github.io">source code</a> of this website,
-            we just ask that you link back to this page in the footer.
-            Please remember to remove the analytics code included in the header of the website which
-            you do not want on your website.
-          </p>
-        </div>
-      </div>
     </div>
   </div>
 </footer>
 </body>
-</html>

 <head>
   <meta charset="utf-8">
   <meta name="description"
+        content="Shell: A Metacognition-Driven Safety Framework for Domain-Specific LLMs">
+  <meta name="keywords" content="LLM Safety, Metacognition, AI Alignment, Activation Steering">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Shell: Metacognition-Driven Safety for Domain-Specific LLMs</title>
   <link href="https://fonts.googleapis.com/css?family=Google+Sans|Noto+Sans|Castoro"
         rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
   <link rel="stylesheet"
         href="https://cdn.jsdelivr.net/gh/jpswalsh/academicons@1/css/academicons.min.css">
+  <style>
+    :root {
+      --shell-primary: #3498db;
+      --shell-secondary: #9b59b6;
+      --shell-accent: #2ecc71;
+    }
+    body {
+      font-family: 'Google Sans', 'Noto Sans', sans-serif;
+      line-height: 1.6;
+    }
+    .hero {
+      background: linear-gradient(135deg, var(--shell-primary), var(--shell-secondary));
+      color: white;
+    }
+    .publication-title {
+      color: white;
+      margin-bottom: 1rem;
+    }
+    .publication-authors {
+      margin-bottom: 1rem;
+    }
+    .author-block {
+      display: inline-block;
+      margin: 0 0.5rem;
+    }
+    .publication-links {
+      margin-top: 1.5rem;
+    }
+    .link-block {
+      display: inline-block;
+      margin: 0 0.5rem;
+    }
+    .external-link {
+      transition: transform 0.2s;
+    }
+    .external-link:hover {
+      transform: translateY(-2px);
+    }
+    .teaser {
+      padding: 4rem 0;
+    }
+    .teaser video {
+      border-radius: 10px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+    }
+    .dnerf {
+      font-weight: bold;
+      color: var(--shell-primary);
+    }
+    .results-carousel {
+      margin: 2rem 0;
+    }
+    .section {
+      padding: 4rem 1.5rem;
+    }
+    .content h2, .content h3 {
+      color: var(--shell-primary);
+      border-bottom: 2px solid #f5f5f5;
+      padding-bottom: 0.5rem;
+      margin-top: 2rem;
+    }
+    .table-container {
+      margin: 2rem 0;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+    table {
+      width: 100%;
+    }
+    table th {
+      background: linear-gradient(135deg, var(--shell-primary), var(--shell-secondary));
+      color: white;
+      font-weight: 600;
+    }
+    .badge {
+      display: inline-block;
+      padding: 0.5rem 1rem;
+      background: var(--shell-primary);
+      color: white;
+      border-radius: 20px;
+      margin: 0.25rem;
+      font-size: 0.9rem;
+      text-decoration: none;
+    }
+    .badge:hover {
+      background: var(--shell-secondary);
+      color: white;
+    }
+    .abstract-box {
+      background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+      padding: 2rem;
+      border-radius: 10px;
+      border-left: 5px solid var(--shell-primary);
+      margin: 2rem 0;
+    }
+    .methodology-step {
+      margin: 2rem 0;
+      padding: 1.5rem;
+      border-radius: 10px;
+      background: white;
+      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+      border-left: 4px solid var(--shell-accent);
+    }
+    .results-highlight {
+      text-align: center;
+      padding: 2rem;
+      background: linear-gradient(135deg, var(--shell-primary), var(--shell-secondary));
+      color: white;
+      border-radius: 10px;
+      margin: 2rem 0;
+    }
+    .results-highlight .number {
+      font-size: 3rem;
+      font-weight: bold;
+      display: block;
+    }
+    .architecture-image {
+      width: 100%;
+      max-width: 800px;
+      display: block;
+      margin: 2rem auto;
+      border-radius: 10px;
+      box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+    }
+  </style>
 </head>
 <body>
     <div class="container is-max-desktop">
       <div class="columns is-centered">
         <div class="column has-text-centered">
+          <h1 class="title is-1 publication-title">🐚 Shell: Metacognition-Driven Safety Framework for Domain-Specific LLMs</h1>
           <div class="is-size-5 publication-authors">
             <span class="author-block">
+              <a href="#" target="_blank">Wen Wu</a><sup>1</sup>,</span>
             <span class="author-block">
+              <a href="#" target="_blank">Zhenyu Ying</a><sup>1</sup>,</span>
             <span class="author-block">
+              <a href="#" target="_blank">Liang He</a><sup>1</sup>,
             </span>
             <span class="author-block">
+              <a href="#" target="_blank">Shell Team</a><sup>1</sup>
             </span>
           </div>
           <div class="is-size-5 publication-authors">
+            <span class="author-block"><sup>1</sup>Anonymous Submission</span>
           </div>
           <div class="column has-text-centered">
             <div class="publication-links">
               <!-- PDF Link. -->
               <span class="link-block">
+                <a href="#" target="_blank"
                    class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                       <i class="fas fa-file-pdf"></i>
                 </a>
               </span>
               <span class="link-block">
+                <a href="#" target="_blank"
                    class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                       <i class="ai ai-arxiv"></i>
                   <span>arXiv</span>
                 </a>
               </span>
               <!-- Code Link. -->
               <span class="link-block">
+                <a href="#" target="_blank"
                    class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                       <i class="fab fa-github"></i>
               </span>
               <!-- Dataset Link. -->
               <span class="link-block">
+                <a href="#" target="_blank"
                    class="external-link button is-normal is-rounded is-dark">
                   <span class="icon">
                       <i class="far fa-images"></i>
                   </span>
+                  <span>Dataset</span>
                   </a>
+              </span>
             </div>
           </div>
         </div>
       </div>
 <section class="hero teaser">
   <div class="container is-max-desktop">
+    <div class="hero-body has-text-centered">
+      <h2 class="subtitle is-3">
+        Uncover and mitigate <span class="dnerf">implicit value risks</span> in education, finance, management—and beyond
       </h2>
+      <div class="content">
+        <a href="#" class="badge">🔒 Model-agnostic</a>
+        <a href="#" class="badge">🧠 Self-evolving rules</a>
+        <a href="#" class="badge">⚡ Activation steering</a>
+        <a href="#" class="badge">📉 90%+ jailbreak reduction</a>
       </div>
     </div>
   </div>
 </section>
 <section class="section">
   <div class="container is-max-desktop">
     <!-- Abstract. -->
     <div class="columns is-centered has-text-centered">
       <div class="column is-four-fifths">
         <h2 class="title is-3">Abstract</h2>
+        <div class="abstract-box">
+          <div class="content has-text-justified">
+            <p>
+              While current LLM safety methods focus on explicit harms (e.g., hate speech, violence), they often miss <strong>domain-specific implicit risks</strong>—such as encouraging academic dishonesty in education, promoting reckless trading in finance, or normalizing toxic workplace culture in management.
+            </p>
+            <p>
+              We introduce <strong>Shell</strong>, a metacognition-driven self-evolution framework that enables LLMs to self-diagnose value misalignments via perspective-taking and consequence simulation, builds a hybrid rule system with expert-defined static trees and self-evolved dynamic graphs, and enforces rules at inference time via activation steering.
+            </p>
+            <p>
+              Evaluated on 9,000 risk queries across <strong>education, finance, and management</strong>, Shell reduces average jailbreak rates by <strong>>90%</strong> on models including GPT-5, Qwen3, and Llama 3.1.
+            </p>
+          </div>
         </div>
       </div>
     </div>
     <!--/ Abstract. -->
+  </div>
+</section>
+<section class="hero is-light is-small">
+  <div class="hero-body">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-8 has-text-centered">
+          <h2 class="title is-3">Core Challenges: Implicit Risks Are Everywhere</h2>
         </div>
       </div>
+      <div class="table-container">
+        <table class="table is-striped is-fullwidth">
+          <thead>
+            <tr>
+              <th>Domain</th>
+              <th>Example Implicit Risk</th>
+              <th>Harmful Consequence</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td><strong>Education</strong></td>
+              <td>Suggesting clever comebacks that escalate bullying</td>
+              <td>Deteriorates peer relationships</td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>Framing "sacrificing sleep for grades" as admirable</td>
+              <td>Promotes unhealthy competition</td>
+            </tr>
+            <tr>
+              <td></td>
+              <td>Teaching how to "rephrase copied essays"</td>
+              <td>Undermines academic integrity</td>
+            </tr>
+            <tr>
+              <td><strong>Finance</strong></td>
+              <td>Encouraging high-leverage speculation as "smart risk"</td>
+              <td>Normalizes financial recklessness</td>
+            </tr>
+            <tr>
+              <td><strong>Management</strong></td>
+              <td>Praising "always-on" culture as "dedication"</td>
+              <td>Reinforces burnout and poor work-life balance</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="has-text-centered">
+        <p class="is-italic">
+          💡 These risks are <strong>not jailbreaks</strong> in the traditional sense—they appear benign but subtly erode domain-specific values.
+        </p>
+      </div>
     </div>
   </div>
 </section>
 <section class="section">
   <div class="container is-max-desktop">
     <div class="columns is-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3">Methodology: The MENTOR Architecture</h2>
+        <div class="methodology-step">
+          <h3 class="title is-4">1. Metacognitive Self-Assessment</h3>
+          <div class="content">
+            <p>LLMs evaluate their own outputs using:</p>
+            <ul>
+              <li><strong>Perspective-taking</strong>: "How would a teacher/parent/regulator view this?"</li>
+              <li><strong>Consequential thinking</strong>: "What real-world harm could this cause?"</li>
+              <li><strong>Normative introspection</strong>: "Does this align with core domain ethics?"</li>
+            </ul>
+            <p>This replaces labor-intensive human labeling with <strong>autonomous, human-aligned reflection</strong>.</p>
+          </div>
+        </div>
+        <div class="methodology-step">
+          <h3 class="title is-4">2. Rule Evolution Cycle (REC)</h3>
+          <div class="content">
+            <ul>
+              <li><strong>Static Rule Tree</strong>: Expert-curated, hierarchical rules (e.g., <code>Education → Academic Integrity → No Plagiarism</code>).</li>
+              <li><strong>Dynamic Rule Graph</strong>: Automatically generated from successful self-corrections (e.g., <code>&lt;risk: essay outsourcing&gt; → &lt;rule: teach outlining instead&gt;</code>).</li>
+              <li>Rules evolve via <strong>dual clustering</strong> (by risk type & mitigation strategy), enabling precise retrieval.</li>
+            </ul>
+          </div>
         </div>
+        <div class="methodology-step">
+          <h3 class="title is-4">3. Robust Rule Vectors (RV) via Activation Steering</h3>
+          <div class="content">
+            <ul>
+              <li>Generate <strong>steering vectors</strong> from contrasting compliant vs. non-compliant responses.</li>
+              <li>At inference, <strong>add vectors to internal activations</strong> (e.g., Layer 18 of Llama 3.1) to guide behavior.</li>
+              <li><strong>No fine-tuning needed</strong>—works on closed-source models like GPT-5.</li>
+            </ul>
           </div>
+        </div>
+        <!-- Architecture Image -->
+        <img src="https://huggingface.co/spaces/feifeinoban/shell/resolve/main/assets/mentor_arch.png"
+             alt="MENTOR Architecture"
+             class="architecture-image">
+        <div class="has-text-centered">
+          <p class="is-italic">
+            Figure: The MENTOR framework. Shell implements this full pipeline.
+          </p>
         </div>
       </div>
     </div>
+  </div>
+</section>
+<section class="section">
+  <div class="container is-max-desktop">
     <div class="columns is-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3">Results: Strong, Efficient, Generalizable</h2>
+        <div class="results-highlight">
+          <span class="number">>90%</span>
+          <span class="subtitle">Average Jailbreak Rate Reduction</span>
         </div>
+        <h3 class="title is-4">Jailbreak Rate Reduction (3,000 queries per domain)</h3>
+        <div class="table-container">
+          <table class="table is-striped is-fullwidth">
+            <thead>
+              <tr>
+                <th>Model</th>
+                <th>Original</th>
+                <th>+ Shell (Rules + MetaLoop + RV)</th>
+                <th>Reduction</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><strong>GPT-5</strong></td>
+                <td>38.39%</td>
+                <td><strong>0.77%</strong></td>
+                <td><strong>98.0%</strong></td>
+              </tr>
+              <tr>
+                <td><strong>Qwen3-235B</strong></td>
+                <td>56.33%</td>
+                <td><strong>3.13%</strong></td>
+                <td><strong>94.4%</strong></td>
+              </tr>
+              <tr>
+                <td><strong>GPT-4o</strong></td>
+                <td>58.81%</td>
+                <td><strong>6.43%</strong></td>
+                <td><strong>89.1%</strong></td>
+              </tr>
+              <tr>
+                <td><strong>Llama 3.1-8B</strong></td>
+                <td>67.45%</td>
+                <td><strong>31.39%</strong></td>
+                <td><strong>53.5%</strong></td>
+              </tr>
+            </tbody>
+          </table>
         </div>
+        <div class="has-text-centered">
+          <p class="is-italic">
+            ✅ Human evaluators prefer Shell-augmented responses <strong>68% of the time</strong> for safety, appropriateness, and usefulness.
           </p>
         </div>
       </div>
     </div>
+  </div>
+</section>
+<section class="section">
+  <div class="container is-max-desktop">
     <div class="columns is-centered">
+      <div class="column is-four-fifths">
+        <h2 class="title is-3">Try It / Use It</h2>
+        <div class="content">
+          <h3 class="title is-4">For Researchers</h3>
+          <ul>
+            <li><strong>Dataset</strong>: 9,000 implicit-risk queries across 3 domains → [HF Dataset Link]</li>
+            <li><strong>Code</strong>: Full implementation of REC + RV → [GitHub Link] (coming soon)</li>
+          </ul>
         </div>
       </div>
     </div>
   </div>
 </section>
 <section class="section" id="BibTeX">
   <div class="container is-max-desktop content">
     <h2 class="title">BibTeX</h2>
+    <pre><code>@article{shell2025,
+  title={Shell: A Metacognition-Driven Safety Framework for Domain-Specific LLMs},
+  author={Wu, Wen and Ying, Zhenyu and He, Liang and Team, Shell},
+  journal={Anonymous Submission},
+  year={2025}
 }</code></pre>
   </div>
 </section>
 <footer class="footer">
   <div class="container">
     <div class="content has-text-centered">
+      <p>
+        This website is licensed under a <a rel="license" target="_blank"
+                                            href="http://creativecommons.org/licenses/by-sa/4.0/">Creative
+        Commons Attribution-ShareAlike 4.0 International License</a>.
+      </p>
     </div>
   </div>
 </footer>
+<script>
+  // Simple JavaScript for interactive elements if needed
+  document.addEventListener('DOMContentLoaded', function() {
+    // Add smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        document.querySelector(this.getAttribute('href')).scrollIntoView({
+          behavior: 'smooth'
+        });
+      });
+    });
+  });
+</script>
 </body>
+</html>