Add Vue Text Summarization Example

README.md

@@ -17,5 +17,6 @@ A collection of [🤗 Transformers.js](https://huggingface.co/docs/transformers.
 | [Node.js (CJS)](./node-cjs/)                            | Sentiment analysis in Node.js w/ CommonJS                   | n/a                                                                             |
 | [Next.js](./next-server/)                               | Sentiment analysis in Next.js                               | [Demo](https://huggingface.co/spaces/webml-community/next-server-template)      |
 | [SvelteKit](./sveltekit/)                               | Sentiment analysis in SvelteKit                             | [Demo](https://huggingface.co/spaces/webml-community/sveltekit-server-template) |
+| [Vue](./vue/)                                           | Text summarization in Vue.js                                | n/a                                                                             |
 
 Check out the Transformers.js [template](https://huggingface.co/new-space?template=static-templates%2Ftransformers.js) on Hugging Face to get started in one click!

vue/.editorconfig

@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100

vue/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

vue/.gitignore

@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/

vue/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

vue/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode"
+  ]
+}

vue/README.md

@@ -0,0 +1,76 @@
+---
+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.
+
+## Getting Started
+
+Follow the steps below to set up and run the application.
+
+### 1. Clone the Repository
+
+Clone the examples repository from GitHub:
+
+```sh
+git clone https://github.com/huggingface/transformers.js-examples.git
+```
+
+### 2. Navigate to the Project Directory
+
+Change your working directory to the `vue` folder:
+
+```sh
+cd transformers.js-examples/vue
+```
+
+### 3. Install Dependencies
+
+Install the necessary dependencies using npm:
+
+```sh
+npm install
+```
+
+### 4. Run the Development Server
+
+Start the development server:
+
+```sh
+npm run dev
+```
+
+The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.
+
+## 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.
+
+## Features
+
+- **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
+
+- **Model**: [Xenova/distilbart-cnn-6-6](https://huggingface.co/Xenova/distilbart-cnn-6-6)
+- **Task**: Summarization
+- **Framework**: Transformers.js
+- **Backend**: ONNX Runtime Web

vue/eslint.config.js

@@ -0,0 +1,26 @@
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import js from '@eslint/js'
+import pluginVue from 'eslint-plugin-vue'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+
+export default defineConfig([
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{js,mjs,jsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+
+  js.configs.recommended,
+  ...pluginVue.configs['flat/essential'],
+  skipFormatting,
+])

vue/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

vue/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}