fedora-copr / log-detective-website

Data collection page for Log Detective AI
11 stars 7 forks source link

add tab with documentation #78

Closed xsuchy closed 6 months ago

xsuchy commented 6 months ago

Likely fixing https://github.com/fedora-copr/log-detective-website/issues/72

FrostyX commented 6 months ago

Some grammar and UI fixes

diff --git a/frontend/public/documentation.html b/frontend/public/documentation.html
index e726923..4467e2d 100644
--- a/frontend/public/documentation.html
+++ b/frontend/public/documentation.html
@@ -8,21 +8,21 @@
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">How to upload log</h5>
-Log Detective can download the build directly from Koji, Copr or Packit. If you have the log somewhere else (different Koji instance, local Mock build), you can point Log Detective to URL where it can be downloaded. The URL can be shortlived, e.g., Pastebin, etc. If you have more logs for one build, you can concat them. E.g., <code>cat build.log root.log | fpaste</code> and provide Log Detective url that you get from <code>fpaste</code>.
+Log Detective can download the build directly from Koji, Copr or Packit. If you have the log somewhere else (different Koji instance, local Mock build), you can point Log Detective to URL where it can be downloaded. The URL can be shortlived, e.g., Pastebin, etc. If you have more logs for one build, you can concat them. E.g., <code>cat build.log root.log | fpaste</code>. Open the paste in a web browser to find its RAW URL, and provide it to Log Detective.
       </div>
     </div>

     <div class="card">
       <div class="card-body">
         <h5 class="card-title">How to annotate a log</h5>
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item">After uploading a log, find its relevant part, highlight it with mouse, and click on "Add" button in the right column.</li>
+          <li class="list-group-item">This will create new Form Field "Snippet 1" in the right column. State there why this part of log is interresting. E.g., <em>"Here the build fails, because the /usr/bin/make command is not available."</em> You can add more these snipets.</li>
+          <li class="list-group-item">Then navigate to <em>"Why did the build fail?"</em> and describe the reason, e.g., <em>"The build failed because `make` command was not available in the buildroot and the %install sections requires it."</em></li>
+          <li class="list-group-item">And finaly go to <em>"How to fix the issue?"</em> and provide a hint how to fix it. E.g., <em>"You have to tell Mock to install the command `make` in buildroot. You can do that by putting `BuildRequires: make`. If you are not sure what package provides this command you can check it using `dnf whatprovides /usr/bin/make` command."</em></li>
+          <li class="list-group-item">And then Submit your annotation. And remember - the more details you provide, the more details will the AI provide to you later.</li>
+        </ul>
       </div>
-      <ul class="list-group list-group-flush">
-        <li class="list-group-item">After uploading a log, find and highlight my mouse relevant part of log and click on "Add" button in the right column.</li>
-        <li class="list-group-item">This will create new Form Field "Snippet 1" in right column. State there why this part of log is interresting. E.g. <em>"Here the build fails, because the /usr/bin/make command is not available."</em> You can add more these snipets.</li>
-        <li class="list-group-item">Then navigate to <em>"Why did the build fail?"</em>. And describe the reason, e.g., <em>"The build failed because `make` command was not available in the buildroot and the %install sections requires it."</em></li>
-        <li class="list-group-item">And finaly go to <em>"How to fix the issue?"</em> and provide a hint how to fix it. E.g., <em>"You have to tell Mock to install the command `make` in buildroot. You can do that by putting `BuildRequires: make`. If you are not sure what package provides this command you can check it using `dnf whatprovides /usr/bin/make` command."</em></li>
-        <li class="list-group-item">And then Submit your annotation. And remember - the more details you provide, the more details will then provide the result to you later.</li>
-      </ul>
     </div>

     <h2 class="text-center">Documentation</h2>
@@ -36,7 +36,7 @@ The build logs can have thousands of lines. When the build fails, it is very har
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">How?</h5>
-We decided to build an AI tool that will read the log and use LLM to give you a human-like answer. We <a href="https://github.com/TomasTomecek/my-rpm-build-broke">know</a> that the goal is achievable, but we do not have enough data. We have millions of failed jobs from Koji, and Copr. But it is not paired with a description of what and why needs to be fixed. Therefore, we started with Phase 1 and we have created this website where you can upload the failed build log and annotate it. During our experiments, we learned that we will require around one thousand annotated logs to be able to build the AI tool.
+We decided to build an AI tool that will read the log and use LLM to give you a human-like answer. We <a href="https://github.com/TomasTomecek/my-rpm-build-broke">know</a> that the goal is achievable, but we do not have enough data. We have millions of failed jobs from Koji, and Copr. But it is not paired with a description of what needs to be fixed and how. Therefore, we started with Phase 1 and we have created this website where you can upload the failed build log and annotate it. During our experiments, we learned that we will require around one thousand annotated logs to be able to build the AI tool.
       </div>
     </div>

@@ -61,19 +61,11 @@ We plan to add a review tool to Log Detective. Similarly what <a href="https://c
       </div>
     </div>

-  <section class="py-1 text-center container">
-    <div class="row py-lg-3">
-      <div class="col-md-10 mx-auto">
-        <h1 class="fw-light">FAQ</h1>
-        <p></p>
-      </div>
-    </div>
-  </section>
-
+    <h2 class="text-center">FAQ</h2>
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">What AI model are you using?</h5>
-We do not know yet. Tomáš experimented with several models and literally every week he came with a new model that just became available and that is better than our previous choice. We assume that when we start training the AI model, we will be using a model that does not exist yet.
+We do not know yet. <a href="https://github.com/TomasTomecek">Tomáš</a> experimented with several models and literally every week he came with a new model that just became available and that is better than our previous choice. We assume that when we start training the AI model, we will be using a model that does not exist yet.
       </div>
     </div>

@@ -88,7 +80,7 @@ We do not know yet. Tomáš experimented with several models and literally every
     <div class="card">
       <div class="card-body">
         <h5 class="card-title">Did you consider using AI to generate the data set?</h5>
-Yes, we consider it. However, we cannot use ChatGPT and similar tools because the problematic license can taint the whole project. Additionally, using AI-generated data to teach AI is prone to <a href="https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)">hallucinations</a>. We are considering using data from Bugzilla and other tools (if Legals allows that), but we want to have a strong core dataset with a clear license.
+Yes, we considered it. However, we cannot use ChatGPT and similar tools because the problematic license can taint the whole project. Additionally, using AI-generated data to teach AI is prone to <a href="https://en.wikipedia.org/wiki/Hallucination_(artificial_intelligence)">hallucinations</a>. We are considering using data from Bugzilla and other tools (if Legals allows that), but we want to have a strong core dataset with a clear license.
       </div>
     </div>

@@ -101,7 +93,7 @@ Uploading the log is 5 seconds work. But you have to annotate it. Describe what

     <div class="card">
       <div class="card-body">
-        <h5 class="card-title">I did not seen failed log for ages - do you have some?</h5>
+        <h5 class="card-title">I did not see failed log for ages - do you have some?</h5>
 Pick anything from <a href="https://koji.fedoraproject.org/koji/builds?type=rpm&order=-completion_time&state=3">Koji's Failed Builds</a>
       </div>
     </div>
FrostyX commented 6 months ago

FTR I created https://pagure.io/fpaste/issue/49 , that would help us simplify the fpaste part of "How to upload log"

xsuchy commented 6 months ago

Updated with your suggestions.