Spaces:

acalejos
/

livebook-apps

Runtime error

App Files Files Community

acalejos commited on Feb 3

Commit

496129c

•

1 Parent(s): 0ae9041

Update public-apps/github-repo-report.livemd

Browse files

Use context aware Kino.Control.button instead of Kino.Input.download

Files changed (1) hide show

public-apps/github-repo-report.livemd +68 -50

public-apps/github-repo-report.livemd CHANGED Viewed

@@ -385,12 +385,12 @@ defmodule LiveReport do
       <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
   </head>
   <body>
-    <button class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
       <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
       </svg>
       <span class="mt-2 block text-sm font-semibold text-gray-900">Generate Your Report to See it Here!</span>
-    </button>
   </body>
   </html>
   """
@@ -407,8 +407,8 @@ defmodule LiveReport do
     Kino.JS.Live.call(kino, {:replace, :loading, origin})
   end
-  def download_html(kino) do
-    Kino.JS.Live.call(kino, {:download})
   end
   defp format_category(category) do
@@ -430,8 +430,9 @@ defmodule LiveReport do
   end
   @impl true
-  def handle_call({:download}, _from, ctx) do
-    {:reply, ctx.html, nil}
   end
   def handle_call({:replace, %Report{} = report, origin}, _from, ctx) do
@@ -446,7 +447,7 @@ defmodule LiveReport do
             <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
         </head>
         <body class="bg-gray-100">
-            <div class="container mx-auto p-6 mt-10 max-w-4xl">
                 <div class="bg-white shadow overflow-hidden sm:rounded-lg">
                     <div class="px-4 py-5 sm:px-6">
                         <h1 class="text-2xl leading-6 font-medium text-gray-900">Project Report</h1>
@@ -590,9 +591,26 @@ defmodule LiveReport do
       ctx.root.innerHTML = html;
       ctx.handleEvent("replace", (html) => {
-        console.log(html);
         ctx.root.innerHTML = html;
       });
     }
     """
   end
@@ -647,8 +665,6 @@ form =
     submit: "Generate"
   )
-frame = Kino.Frame.new()
 Kino.listen(form, fn
   %{
     data: %{repo: repo, github_token: gh_tok, openai_token: oai_tok, model: model},
@@ -656,55 +672,57 @@ Kino.listen(form, fn
   } ->
     LiveReport.loading(live_report, origin)
-    new_html =
-      cond do
-        repo == "" ->
-          LiveReport.replace(live_report, {:error, "Please specify a GitHub Repo"}, origin)
-        gh_tok == "" ->
-          LiveReport.replace(live_report, {:error, "Please specify a GitHub Token"}, origin)
-        oai_tok == "" ->
-          LiveReport.replace(live_report, {:error, "Please specify an OpenAI Token"}, origin)
-        model == "" ->
-          LiveReport.replace(live_report, {:error, "Please specify an OpenAI model"}, origin)
-        true ->
-          case repo |> ReportGenerator.generate_report(gh_tok, oai_tok, model) do
-            {:ok, report} ->
-              LiveReport.replace(live_report, report, origin)
-            {:error, reason} ->
-              cond do
-                String.contains?(reason, "invalid_api_key") ->
-                  LiveReport.replace(live_report, {:error, "Invalid OpenAI API Key"}, origin)
-                String.contains?(reason, "invalid model ID") or
-                    String.contains?(reason, "model_not_found") ->
-                  LiveReport.replace(live_report, {:error, "Invalid OpenAI Model"}, origin)
-                true ->
-                  LiveReport.replace(live_report, {:error, reason}, origin)
-              end
-          end
-      end
-    Kino.Frame.render(frame, Kino.Text.new(new_html, terminal: false))
 end)
-download =
-  Kino.Download.new(
-    fn ->
-      Kino.Frame.get_outputs(frame)
-      |> hd()
-      |> Map.get(:text)
-    end,
-    label: "Download Report",
-    filename: "report.html"
-  )
-Kino.Layout.grid([instructions, form, live_report, download], columns: 1, gap: 4, boxed: true)
 ```
-<!-- livebook:{"offset":31074,"stamp":{"token":"XCP.onc6e6vcHY1ankirQw_JV6eLv2buba18ObiQngfKw-jQRGz99wvgiH_rRYsSTS5hOpf4k98j_4lCg9GY6ybuR8V7DvPj5PIeLI-HSkbmPlRHSspblkk_pLcdRPIbTr0Y6CGhoPyzov0","version":2}} -->

       <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
   </head>
   <body>
+    <div class="relative block w-full rounded-lg border-2 border-dashed border-gray-300 p-12 text-center focus:outline-none">
       <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
       </svg>
       <span class="mt-2 block text-sm font-semibold text-gray-900">Generate Your Report to See it Here!</span>
+    </div>
   </body>
   </html>
   """
     Kino.JS.Live.call(kino, {:replace, :loading, origin})
   end
+  def download_html(kino, origin) do
+    Kino.JS.Live.call(kino, {:download, origin})
   end
   defp format_category(category) do
   end
   @impl true
+  def handle_call({:download, origin}, _from, ctx) do
+    send_event(ctx, origin, "download", nil)
+    {:reply, :ok, ctx}
   end
   def handle_call({:replace, %Report{} = report, origin}, _from, ctx) do
             <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
         </head>
         <body class="bg-gray-100">
+            <div id="report" class="container mx-auto p-6 mt-10 max-w-4xl">
                 <div class="bg-white shadow overflow-hidden sm:rounded-lg">
                     <div class="px-4 py-5 sm:px-6">
                         <h1 class="text-2xl leading-6 font-medium text-gray-900">Project Report</h1>
       ctx.root.innerHTML = html;
       ctx.handleEvent("replace", (html) => {
         ctx.root.innerHTML = html;
       });
+      ctx.handleEvent("download", ( ) => {
+          // Convert the clone's content to a string
+          const htmlContent = '<!DOCTYPE html>\\n<html>\\n' + ctx.root.innerHTML + '\\n</html>';
+          // Create a Blob with the HTML content
+          const blob = new Blob([htmlContent], { type: 'text/html' });
+          // Create a link element to trigger the download
+          const link = document.createElement('a');
+          link.href = URL.createObjectURL(blob);
+          link.download = 'report.html';
+          // Append the link to the body, click it, and then remove it
+          document.body.appendChild(link);
+          link.click();
+          document.body.removeChild(link);
+       });
     }
     """
   end
     submit: "Generate"
   )
 Kino.listen(form, fn
   %{
     data: %{repo: repo, github_token: gh_tok, openai_token: oai_tok, model: model},
   } ->
     LiveReport.loading(live_report, origin)
+    cond do
+      repo == "" ->
+        LiveReport.replace(live_report, {:error, "Please specify a GitHub Repo"}, origin)
+      gh_tok == "" ->
+        LiveReport.replace(live_report, {:error, "Please specify a GitHub Token"}, origin)
+      oai_tok == "" ->
+        LiveReport.replace(live_report, {:error, "Please specify an OpenAI Token"}, origin)
+      model == "" ->
+        LiveReport.replace(live_report, {:error, "Please specify an OpenAI model"}, origin)
+      true ->
+        case repo |> ReportGenerator.generate_report(gh_tok, oai_tok, model) do
+          {:ok, report} ->
+            LiveReport.replace(live_report, report, origin)
+          {:error, reason} ->
+            cond do
+              String.contains?(reason, "invalid_api_key") ->
+                LiveReport.replace(live_report, {:error, "Invalid OpenAI API Key"}, origin)
+              String.contains?(reason, "invalid model ID") or
+                  String.contains?(reason, "model_not_found") ->
+                LiveReport.replace(live_report, {:error, "Invalid OpenAI Model"}, origin)
+              true ->
+                LiveReport.replace(live_report, {:error, reason}, origin)
+            end
+        end
+    end
 end)
+downloadButton = Kino.Control.button("Download Report")
+Kino.listen(downloadButton, fn %{type: :click, origin: origin} ->
+  LiveReport.download_html(live_report, origin)
+end)
+Kino.Layout.grid(
+  [
+    instructions,
+    form,
+    live_report,
+    downloadButton
+  ],
+  columns: 1,
+  gap: 6,
+  boxed: true
+)
 ```
+<!-- livebook:{"offset":31645,"stamp":{"token":"XCP.lEznQ8gJ-Q4vQRtuuYZFNEAQ4dX43lDK0WJaCsYxrBvxtKGbDAH-9RpliYFJnPG0s_CcYj0ziZn-Jr4mBGR_35xi0YReFTFGGJPx5wOL7dBA7v97nK8p95TzsTOtcoCKQpLFbY0UYjA","version":2}} -->