https://github.com/nico-martin/markdown-editor

An on-device AI powered markdown editor web app based on the File System Access API
https://github.com/nico-martin/markdown-editor

ai filesystemaccess postcss preact pwa webai webllm workbox

Last synced: about 2 months ago
JSON representation

An on-device AI powered markdown editor web app based on the File System Access API

• Host: GitHub
• URL: https://github.com/nico-martin/markdown-editor
• Owner: nico-martin
• License: mit
• Created: 2020-12-09T14:00:49.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-12-02T20:47:11.000Z (2 months ago)
• Last Synced: 2024-12-02T21:34:49.889Z (2 months ago)
• Topics: ai, filesystemaccess, postcss, preact, pwa, webai, webllm, workbox
• Language: TypeScript
• Homepage: https://md.nico.dev/
• Size: 5.32 MB
• Stars: 43
• Watchers: 2
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# \[md.edit\]

\[md.edit\] is a web based markdown editor that uses modern progressive web app features to provide a great, cross-platform editing experience.

[md.nico.dev](https://md.nico.dev/)

## File System Access API

The main goal of this project is to showcase the **[File System Access API](https://wicg.github.io/file-system-access/)**.

This API allows a web app to access local files. That means files can be opened and saved directly in the browser.

[https://web.dev/file-system-access/](https://web.dev/file-system-access/)

## File Handling

To make it even more convenient to open and save files, this app also uses the **[File Handling API](https://web.dev/file-handling/)**. If installed the app can register itself as a handler for markdown files. That means markdown files can be opened directly in the app from the file explorer.

## Installable PWA

This webapp is a [Progressive Web App](https://web.dev/progressive-web-apps/) and can be installed on your device.  

It uses a webapp manifest (generated by [Vite PWA Plugin](https://vite-pwa-org.netlify.app/)) to present itself as an installable PWA to the browser.

## Offline support

It also comes with a service worker (generated by [WorkboxJS](https://developer.chrome.com/docs/workbox/)) to cache all assets and make the app available offline.  

Furthermore, all downloaded audio files are cached and can be used offline.

## AI

This app uses a couple of AI models to provide additional features. All the models run directly in the browser and don't require any server communication.

### Translation

Sections of the markdown can be translated to other languages using AI models.  

It therefore uses [Transformers.js](https://huggingface.co/docs/transformers.js/index) to run the model in a web worker and then pipes the translated output back to the editor.

### Speech to Text

Instead of writing paragraphs yourself, md.edit offers a speech to text feature. You can now record whatever you want to say and the app will transcribe it. It uses different versions of [https://huggingface.co/openai/whisper-base](Whisper) that again run in a web worker using [Transformers.js](https://huggingface.co/docs/transformers.js/index).

### Text generation / LLM

In addition to the smaller translation and speech to text models, the app also uses large language models to generate or improve sections of the file.

md.edit therefore uses LLMs, like the [Mistral 7B Instruct](https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.2), compiled for the web using [MLC LLM](https://github.com/mlc-ai/mlc-llm). Everything runs in a web worker while the calculations are done on the GPU using [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API).

Special thanks to the team behind [WebLLM](https://github.com/mlc-ai/web-llm) where most of my MLC-adapter is based on.