zhuberty/annotator

Annotator tool for Librecode dataset generation efforts.

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

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

Once the build process is completed, your application will be ready for deployment in a production environment.

💪 Support Vuetify Development

This project is built with Vuetify, a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our sponsors and backers. If you are interested in supporting this project, please consider:

• Requesting Enterprise Support
• Sponsoring John on Github
• Sponsoring Kael on Github
• Supporting the team on Open Collective
• Becoming a sponsor on Patreon
• Becoming a subscriber on Tidelift
• Making a one-time donation with Paypal

📑 License

MIT

Copyright (c) 2016-present Vuetify, LLC