Welcome!

LibreCode Annotation Tool

An asciinema-based coding session annotator aimed at training an LLM to assist at a deeper level within debugging sessions.

Background

LLMs such as ChatGPT rely heavily on articles and code commits rather than the ever-evolving context of a coding session which consist of attempts, failures, successes, screen switching, and so on. So, the goal here is to enrich the training data of an LLM by providing it with a more dynamic and real-time coding session data.

Features

upload an asciinema recording
annotate the recording with comments
export the annotated recording as a new asciinema recording

Installation Instructions

Prerequisites

Install Node.js and npm
Install bun

Installation

bun install

Deployment Instructions

Local Development

bun dev

Usage Instructions

asciinema
- install asciinema
  - sudo apt install asciinema
- start recording
  - asciinema rec 'hello-world.rec' --stdin
- stop recording
  - press <ctrl-d> or type exit when you're done
- play recording
  - asciinema play 'hello-world.rec'
run and open the annotation app in your browser
- bun dev
- http://localhost:3000
upload asciinema recording to the annotator app
- click on the upload button
- select the recording file
- click play
annotate the asciinema recording
- pause the recording
- place the orange timeline cursor to where you want to begin an annotated segment of time
- click on the red button to set the beginning keyframe
- place the orange cursor to where you want to end the annotated segment of time
- click on the green button to set the ending keyframe
- click the "create new annotation" button
- move the orange cursor over the annotation until you see "no text" in the annotation text box
- replace "no text" with your annotation
- repeat the above steps for each annotation
- finally, click the "download" button to export the annotated recording

Default Info About Vite and Vuetify

This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.

❗️ Important Links

📄 Docs
🚨 Issues
🏬 Store
🎮 Playground
💬 Discord

💿 Install

Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:

Package Manager	Command
yarn	`yarn install`
npm	`npm install`
pnpm	`pnpm install`
bun	`bun install`

After completing the installation, your environment is ready for Vuetify development.

✨ Features

🖼️ Optimized Front-End Stack: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. Vue 3 | Vuetify 3
🗃️ State Management: Integrated with Pinia, the intuitive, modular state management solution for Vue.
🚦 Routing and Layouts: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. Vue Router | vite-plugin-vue-layouts
💻 Enhanced Development Experience: Benefit from TypeScript's static type checking and the ESLint plugin suite for Vue, ensuring code quality and consistency. TypeScript | ESLint Plugin Vue
⚡ Next-Gen Tooling: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). Vite
🧩 Automated Component Importing: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. unplugin-vue-components
🛠️ Strongly-Typed Vue: Use vue-tsc for type-checking your Vue components, and enjoy a robust development experience. vue-tsc

These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.

💡 Usage

This section covers how to start the development server and build your project for production.

Starting the Development Server

To start the development server with hot-reload, run the following command. The server will be accessible at http://localhost:3000:

yarn dev

(Repeat for npm, pnpm, and bun with respective commands.)

Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node v21.3.0 or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.

Building for Production

To build your project for production, use:

yarn build