Giter Club home page Giter Club logo

ui's Introduction

InstructLab UI

Project aims to provide a UI based interface to the contributors and reviewers to submit and review contribution to instructlab/taxonomy. The intention is to simplify the process of contribution by providing a user friendly interface, that doesn't require the user to have a deep understanding of tools required to contribute skill and knowledge to the taxonomy. This project also aims to provide a platform for the reviewers to efficiently review the contributions and provide feedback to the contributors.

Overview

Current scope of the project is to work on following personas:

  • Taxonomy Contributor: Person who wants to contribute a skill or a knowledge to the taxonomy.
  • Taxonomy Triager: Person who has expertise to review the contributions and provide feedback to the contributors.

The technical overview and developer docs for getting started can be found here.

Contributing

If you have suggestions for how instructlab/ui could be improved, or want to report a bug, open an issue! We'd love all and any contributions.

For more, check out the InstructLab UI Contribution Guide and InstructLab Community Guide.

Community Meeting

We have a weekly community meeting to discuss the project and contributions. Meeting happens every Wednesday 10AM PST. Please subscribe to the InstructLab Community Calendar following the instructions here. UI project meeting details are present in the calendar event.

Slack channel

Please subscribe to the InstructLab Slack workspace by following the instructions here. Once you are part of the workspace, you can join the #ui channel where most of the project related topics are discussed.

License

Apache 2.0

ui's People

Contributors

nerdalert avatar vishnoianil avatar aevo98765 avatar dominikkawka avatar nouveau avatar dependabot[bot] avatar gregory-pereira avatar muhammadkurdi-cs avatar russellb avatar memalhot avatar

Stargazers

 avatar j3d1d3v avatar  avatar Aflah avatar  avatar  avatar

Watchers

David Cox avatar Joe Sepi avatar Jason T. Greene avatar Leslie Hawthorn avatar Akash Srivastava avatar Máirín Duffy avatar JJ Asghar avatar Jeremy Eder avatar  avatar Juan Manuel Cappi avatar  avatar Kai Xu avatar Mark Sturdevant avatar  avatar Christian Kadner avatar Martin Hickey avatar Oindrilla Chatterjee avatar

ui's Issues

The chat 'Model Selector' defaults back to Granite-7b every time the page is refreshed

For users that are not using the Granite-7b model for chat inference, every time users visit another page and come back to http://localhost:3000/playground/chat or just refresh the page, the model selector defaults back to Granite-7b. This then causes the chat inference requests to fail because the incorrect model name is passed to the chat model server.

Possible solutions:

  • Add the ability for the user to select an option as their default option.
  • Model type wont change on a page reset. local web browser storage?
Screenshot 2024-07-10 at 11 10 03

Broaden OAuth user pool beyond just ILab org members

  • Only allowing instructlab org members to OAuth won't scale.
  • There is a cost to org members along with it being too restrictive. E.g. a workshop shouldn't have to add everyone into the org.
  • The obvious answer would be to open it to anyone. This would require accelerating the plan for a daily limit on chats. If that is too much to get done before v1 we could limit chat based on ilab org membership.

Write high level traiger workflow

Write a document that contains

  • define traigers persona
  • current traiging workflow
  • relevant challenges with the current traiger workflow
  • possible solutions to address these challenges

Refresh a PR after the PR is edited

I think there is a state that after a PR is edited and submitted a couple of times without refreshing the page eventually an error code 422 is sent back from the GitHub API. I'm guessing it's a state thing. If you go back to the dashboard and edit again it won't happen but worth the time to fix even if its a fairly unlikely workflow event.

Adding dev chat server running instructions

It would be really useful as a dev contributor if you could quickly spin a model inference server.

Two approaches could be taken here:

  1. ilab cli setup and ilab serve instructions - link to existing documentation here.

  2. Docker contained service to expose port 8000 and 8001 just in case users have another server running on 8000.

Acceptance Criteria:

Setup prod and qa deployment for community UI

Nail down details around

  • Explore the available options to host the community UI
  • Write a proposal to share with the oversight committee for approval
  • Setup the prod and qa deployments

depends-on : #9

Editing submission Q&As add quotes around the edited fields

For example:

 - question: h2424
    context: h244h
    answer: h24222
  - question: fds
    context: '123456789'
    answer: '1234567890'
  - question: '12345'
    context: ''
    answer: '6789'

Modifying yaml.dump in src/app/edit-submission/skill/[id]/page.tsx should resolve it.

Issue Running InstructLab UI - Need Help with .env Variables

Hi team,

Thank you for developing the InstructLab UI! I'm excited to start using it, but I'm currently having trouble getting it up and running. The main issue seems to be understanding and setting the .env variables.

Here's what I have in my .env file:

IL_UI_ADMIN_USERNAME=admin
IL_UI_ADMIN_PASSWORD=password
OAUTH_GITHUB_ID=<OAUTH_APP_ID>
OAUTH_GITHUB_SECRET=<OAUTH_APP_SECRET>
NEXTAUTH_SECRET=your_super_secret_random_string
NEXTAUTH_URL=http://localhost:3000
IL_GRANITE_API=<GRANITE_HOST>
IL_GRANITE_MODEL_NAME=<GRANITE_MODEL_NAME>
IL_MERLINITE_API=<MERLINITE_HOST>
IL_MERLINITE_MODEL_NAME=<MERLINITE_MODEL_NAME>
GITHUB_TOKEN=<TOKEN FOR OAUTH INSTRUCTLAB MEMBER LOOKUP>
TAXONOMY_DOCUMENTS_REPO=github.com/<USER_ID>/<REPO_NAME>
NEXT_PUBLIC_TAXONOMY_REPO_OWNER=<GITHUB_ACCOUNT>
NEXT_PUBLIC_TAXONOMY_REPO=<REPO_NAME>
  • Could you please provide a brief explanation of what each variable does? Some of them seem self-explanatory (like OAUTH_GITHUB_ID/OAUTH_GITHUB_SECRET), but others are less clear.
  • Where can I obtain the values for each variable? For example, I'm not sure where to get the IL_GRANITE_API key or how to generate the NEXTAUTH_SECRET.

Any guidance would be greatly appreciated!

Thanks,
Jan

Show warning pop-up when user login

Show warning pop-up when user login to the UI. Warning text should contain information about, how skill and knowledge contribution is made on their behalf and what possible changes UI does to the user github account, such as cloning taxonomy in users own github account, cloning doc repo in user's github account for publishing a document publicaly etc.

Determine a strategy for taxonomy tree placement of submissions

  • Work with triagers to determine where to place UI submissions.
  • I think there is consensus that expecting the user to place the submission in a proper directory is generally not ideal. There has been mention in the taxonomy standup that placing the submission could be a triager function.
  • We can't do a flat directory since attribution.txt is a fixed filename and not referenced in qna.yml.

Enhancement: Decide key technology choices to use for UI

Current code base uses next.js + typescript. Is this enough for the feature that we would like to deliver? Or do we need to explore some other UI technologies that is require or would prefer to use for building better UI?

It's good to nail this down, so we have some guidance on what we should use or what we should avoid.

Pull creation request fails if the taxonomy repo fork doesn't exist in user account

Seems like if the taxonomy repo fork doesn't exist in user account, it tries to create the repo, but while fetching the bash SHA, it fails with following error message:

Failed to create pull request: Error: Failed to get base branch SHA
    at O (/app/.next/server/app/api/pr/skill/route.js:8:1259)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async w (/app/.next/server/app/api/pr/skill/route.js:6:5)
    at async /app/node_modules/next/dist/compiled/next-server/app-route.runtime.prod.js:6:36258```

Although i can see that the repo is cloned successfully. Once the repo is cloned, retrying to submit the skill/knowledge works.

cc: @nerdalert 

Communicate to the user when a chat request is made with no prompt

At present the handleSubmit function for the chat page.tsx handles an empty prompt text input by just returning the function. An improvement would be to communicate to the user where they have gone wrong with an Alert.

Acceptance Criteria:

  1. When a user submits a chat request with no prompt communicate this via an alert.

Amend skill doesn't populate the yaml properly

Amending the existing skill PR, doesn't generate the qna.yaml in the same way (Although yaml seems okay). Please see this example PR.

https://github.com/instructlab-public/test-taxonomy/pull/9/files

I amended the first set of question/answer/context and it updated the PR okay, but removed the quotes around string values.

https://github.com/instructlab-public/test-taxonomy/pull/9/files#diff-9a5614e04ed4f578174cb55c837d49280a2240e2a22b3d59853e0d4b83e61ea0R5

Discuss first release of the UI project

We need to address few major questions to drive the community focus.

  • what all features do we want to include in our first release?
  • approximate timeline for the first release?
  • where should we host the first release?
  • do we want to enable any cost control mechanism?

If you have more questions that we should discuss in this context, please feel free to the list.

Fix the default location of the skill and knowledge files

All the skill contributions should put the relevant files under the "compositional_skills" directory tree and similarly all the knowledge contribution should put relevant files under "knowledge" directory tree. Otherwise, the labeler job won't tag these PRs with appropriate tags. If the PRs are not tagged will skill or knowledge, UI won't show users contribution on the dashboard.

Make changes to the 'Knowledge' section of the 'Knowledge Contribution Form'

Changes to be made:

  1. Change the section name from 'Knowledge' to 'Question and Answers'.

  2. Ensure/strongly advise a minimum of 5 Q and As are provided by the user.
    Each qna.yaml file requires a minimum of five question-answer pairs. The qna.yaml format must include the following fields:
    https://github.com/instructlab/taxonomy?tab=readme-ov-file#getting-started-with-knowledge-contributions

  3. Encourage the users to add more Q and As to get better synthetically generated data.

  4. Reduce the span of the + Add Question and Answer button.

Happy for feedback on this. Also I will split these tasks out into individual issues if this is thought to be better.

Write high level contributor workflow

Write a document that contains

  • the target contributor
  • current contributor workflow
  • relevant challenges with the current contributor workflow
  • possible solutions to address these challenges

Create a template repo in upstream for forking for knowledge store and reference

  • We need a template repo for knowledge document submissions in instructlab.
  • This will allow for users to upload docs by automating the fork and uploading, PR, SHA retrieval by the UI. It also satisfies the constraint to not store documents themselves in upstream for liability reasons.
  • This will probably require a dev-doc submission to get a repo cut in the UI directory there.
  • See workflow:

Knowledge-Submission-v2

Add description for skill and knowledge

Screenshot 2024-06-24 at 12 40 11 PM

It would be beneficial to users to understand a breakdown of what a knowledge and skill contribution are before choosing which one to submit. I think this could go right below the "Knowledge Contribution Form" or "Skill Contribution Form" that way a new user knows which is the proper one to submit.

Improve the github login UI

Currently the login page has small github icon that takes you for github authentication. This is not very intuitive, folks generally endup trying the github credential in the username/password and it obviously fails.

We need to either add text "Login with (github icon)" or something better to make it more intuitive.

environment variables are not picked in the client side code

Deployment of the UI app in the container (in kubernetes) mounts the .env file as a secret. All the environment variable defined in .env are exported as env variable in the container. Client side code is build statically, so it inlines the env variable values at the build time. But the container image is public through github actions with no .env files, and due to that the client side codes is statically build with empty values and that result in failure of some UI features.

We can locally build images with the relevant .env files for each deployment environment (qa, prod) and use those images for deployment, but it's too cumbersome and not good practice.

Other option is to ensure we always use app router or getServerSideOpt to get the environment variables as mention in the next.js documentation here.

Adjust error message

When clicking an action ("Download YAML", "Download Attribution", and "Download Skill/Knowledge) while the form is complete, the error message displayed including the first problematic field detected may be slightly confusing.
For example, "Please make sure all the email fields are filled!" would better be changed to, for example, "The email field is empty. Please make sure all the fields are filled!"

Screenshot 2024-07-11 at 9 36 20 AM Screenshot 2024-07-11 at 9 38 22 AM

Support Dynamic taxonomies (QNA document generators)

This is a new feature request.

Status Quo

Right now, taxonomies are defined by putting answers in qna.yaml files. This is human work and at times requires domain knowledge AND a good eye to spot typos and other mistakes. For some tasks, it may be beneficial to rely on a program to produce QNA to then feed it into the model for synthetic generation.

Some examples of tasks that could benefit from programmable approach to generate seed samples
:

Proposal

In addition to qna.yaml files directly stored on disc, also allow to define taxonomies as programs that, when executed, produce a qna.yaml document that complies with the Instruct Lab taxonomy format.

My attempt at implementing both cli and taxonomy bits for this feature (currently closed but I am happy to revive and rebase):

(old)

(new drafts - rebased old code against current main)

Considerations

  • The final qna.yaml may or may not be stored in the taxonomy repo. (I'd prefer to not store it since it's directly derived from the program.)
  • The exact format for the program. I suggest to not assume a particular execution environment / language but use Dockerfiles / Containerfiles, plus defining some basic operational interface (e.g. how input can be fed into the container command entrypoint, and how resulting QNA document is returned from the program. One suggestion could be passing both through a volume mount.)
  • Since we are talking about executables from external contributors, security of the project should be considered: the programs should be validated through GitHub actions, but only when maintainers sanity-checked the contribution is safe; Dockerfiles should use "official" / "proven" base images.

Fix the name of the yaml generated by "Download Yaml"

Download yaml feature download the yaml and name it "knowledge_qna.yaml" or "skill_qna.yaml". User needs to rename these files to qna.yaml to submit the PR to taxonomy. It would be better to rename these files qna.yaml, so user doesn't need to rename it before pushing the PR. Sometime user forgets to rename, and the PR checks fails.

Add dev instructions of how to run the Markdown linter locally

I made changes to a MD file and found that the CI pipeline failed because of the Markdown linter. I didn't know how to run this locally on my machine which would make it easier to correct these linting issues.

Acceptance Criteria:

Add instructions of what tool and how to install the Markdown linter locally for devs to run checks before pushing remotely.

Streamline Document Review Process

Automatically pull commit information from knowledge document in taxonomy knowledge submission yamls, paste direct link to user created markdown as comment on PR.

Investigate passing documents to deepsearch

Currently we are discussing how we plan to pass the documents to deep-search for conversion. Currently were thinking provide both options for a sending a file as binary data, and having a URL but we need to communicate with Peter and co if this can work.
/cc @nerdalert

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.