update readme and metadata

README.md

@@ -1,19 +1,30 @@
 ---
-title: Model Structure Viewer
-emoji: 🌖
+title: Transformer Model Structure Visualizer
+emoji: 🧩
 colorFrom: indigo
-colorTo: pink
+colorTo: teal
 sdk: docker
+app_file: backend/app.py
 pinned: false
-short_description: visualize model structure
----
+license: mit
+short_description: Visualize Transformer architectures by providing a transformer model name without downloading weights.
+tags:
+  - transformers
+  - visualization
+  - attention
+  - model-architecture
+  - huggingface
+  - model-layers
+  - model-structure
+  - hidden-states
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
 
 
 # Run the app locally
+This app is developed using React + Fastapi. You can run this app locally with the following steps.
 
-### Frontend
+### Run Frontend
 
 1. Install dependencies:
     ```
@@ -24,21 +35,34 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
     ```commandline
     npm run dev
     ```
+3. Open the browser and access the service from http://localhost:5173/
+
 
-### Backend
+### Run Backend
 
-1. Start virtual env
+1. **Activate the virtual environment**
 
-2. Go to the **backend** directory
+   Make sure you have your Python virtual environment set up and activated.
 
-3. Install dependencies
+2. **Navigate to the backend directory**
+
+   ```commandline
+   cd backend
+   ```
+
+3. **Install dependencies**
+    ```commandline
+   pip install -r requirements.txt
+   ```
 
-4. If you're running on a GPU device, which enables more models options, install the GPU related packages:
+4. **(Optional) Install GPU-related packages** 
+   If you are running on a GPU-enabled device, you can install additional packages (e.g., for faster inference and support for more models):
    ```commandline
    python install_gpu_packages.py
    ```
 
-5.Run the app
+5. **Start the backend server**
+   Run the FastAPI app with Uvicorn:
     ```commandline
     uvicorn app:app --reload --host 0.0.0.0 --port 8000
     ```

frontend/src/App.jsx

@@ -44,7 +44,7 @@ export default function App() {
           Transformer Model Structure Viewer
         </h1>
         <p className="text-center text-slate-500 mb-6">
-          Enter a model name (e.g. <code>deepseek-ai/deepseek-moe-16b-base</code>) to view its
+          Enter a model name (e.g. <code>deepseek-ai/DeepSeek-V3.1</code>) to view its
           architecture.
         </p>
 
@@ -74,7 +74,7 @@ export default function App() {
 
       {/* Footer */}
       <footer className="mt-8 text-slate-500 text-sm text-center">
-        Still under development.
+        This app is currently running on free CPU and thus does not support models that use flash_attn. If you have GPU resources available, consider using a local setup for better performance by following the instructions in the <a href="https://huggingface.co/spaces/maomao88/model_structure_viewer/blob/main/README.md" className="text-sky-600 underline">README</a>.
       </footer>
     </div>
   );

frontend/src/components/ModelInputBar.jsx

@@ -3,9 +3,9 @@ import React, { useState, useEffect, useRef } from "react";
 export default function ModelInputBar({ loading, fetchModelStructure }) {
     // Single selection: user can pick one of several fetch options
     const options = [
-        { label: "Not Sure", value: "none", default: "deepseek-ai/deepseek-moe-16b-base" },
+        { label: "Not Sure", value: "none", default: "deepseek-ai/DeepSeek-V3.1" },
         { label: "Causal Language Models (e.g. GPT, LLaMA, Phi, Mistral)", value: "causal", default: "gpt2"},
-        { label: "Masked Language Models (BERT, RoBERTa, DistilBERT)", value: "masked", default: "bert-base-uncased" },
+        { label: "Masked Language Models (BERT, RoBERTa, DistilBERT)", value: "masked", default: "distilbert-base-uncased" },
         { label: "Sequence Classification (text classification, sentiment analysis)", value: "sequence", default: "distilbert-base-uncased" },
         { label: "Token Classification (NER, POS tagging)", value: "token",  default: "dbmdz/bert-large-cased-finetuned-conll03-english" },
         { label: "Question Answering Models (e.g. BERT QA, RoBERTa QA)", value: "qa", default: "distilbert-base-uncased-distilled-squad" },