update Vue readme

Author: SeanGallen

vue/README.md

@@ -1,54 +1,72 @@
+---
+title: Vue Text Summarization
+emoji: 📝
+colorFrom: green
+colorTo: blue
+sdk: static
+pinned: false
+license: apache-2.0
+models:
+  - Xenova/distilbart-cnn-6-6
+short_description: Text summarization using Transformers.js in Vue.js
+---
+
 # Vue Text Summarization Application
 
 This folder contains the source code for a web application that summarizes text using Transformers.js! The app uses the DistilBART-CNN model to generate concise summaries of input text.
 
-## How it works
+## Getting Started
 
-The user enters text in the input textarea and clicks "Summarize". The application processes the text using the DistilBART-CNN model and displays a summarized version in the output area. The model runs entirely in the browser using WebAssembly and ONNX Runtime.
+Follow the steps below to set up and run the application.
 
-## Features
+### 1. Clone the Repository
 
-- **Text Summarization**: Uses the Xenova/distilbart-cnn-6-6 model for high-quality text summarization
-- **Real-time Processing**: Streaming output shows summary generation in real-time
-- **Progress Tracking**: Visual progress bars during model loading
-- **Responsive UI**: Clean, modern interface built with Vue 3
+Clone the examples repository from GitHub:
 
-## Recommended IDE Setup
+```sh
+git clone https://github.com/huggingface/transformers.js-examples.git
+```
 
-[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+### 2. Navigate to the Project Directory
 
-## Recommended Browser Setup
+Change your working directory to the `vue` folder:
 
-- Chromium-based browsers (Chrome, Edge, Brave, etc.):
-  - [Vue.js devtools](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
-  - [Turn on Custom Object Formatter in Chrome DevTools](http://bit.ly/object-formatters)
-- Firefox:
-  - [Vue.js devtools](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
-  - [Turn on Custom Object Formatter in Firefox DevTools](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
+```sh
+cd transformers.js-examples/vue
+```
+
+### 3. Install Dependencies
 
-## Project Setup
+Install the necessary dependencies using npm:
 
 ```sh
 npm install
 ```
 
-### Compile and Hot-Reload for Development
+### 4. Run the Development Server
+
+Start the development server:
 
 ```sh
 npm run dev
 ```
 
-### Compile and Minify for Production
+The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.
 
-```sh
-npm run build
-```
+## How it works
+
+The user enters text in the input textarea and clicks "Summarize". The application processes the text using the DistilBART-CNN model and displays a summarized version in the output area. The model runs entirely in the browser using WebAssembly and ONNX Runtime.
 
-### Lint with [ESLint](https://eslint.org/)
+## Features
 
-```sh
-npm run lint
-```
+- **Text Summarization**: Uses the Xenova/distilbart-cnn-6-6 model for high-quality text summarization
+- **Real-time Processing**: Streaming output shows summary generation in real-time
+- **Progress Tracking**: Visual progress bars during model loading
+- **Responsive UI**: Clean, modern interface built with Vue 3
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar).
 
 ## Model Information