Support formatting result

app/assets/stylesheets/application.scss

@@ -35,3 +35,26 @@ form {
     }
   }
 }
+
+table {
+  @extend .table;
+  @extend .table-bordered;
+  @extend .table-striped;
+  @extend .table-hover;
+  @extend .table-responsive;
+}
+
+section.text {
+  img {
+    float: left;
+    margin-right: 10px;
+  }
+
+  pre {
+    white-space: pre-wrap;
+  }
+
+  table {
+    clear: both;
+  }
+}

app/controllers/extractions_controller.rb

@@ -11,8 +11,9 @@ def create
 
     respond_to do |format|
       if @extraction.valid?
+        @extracted = @extraction.extract
         format.html { render :create }
-        format.json { render json: @extraction.extract }
+        format.json { render json: @extract }
       else
         format.html { render :show }
         format.json { render json: @extraction.errors, status: :unprocessable_entity }

app/helpers/extractions_helper.rb

@@ -1,2 +1,19 @@
 module ExtractionsHelper
+  def format_screenshot(screenshot)
+    return "" if screenshot.nil?
+
+    data = screenshot["data"]
+    mime_type = screenshot["mime-type"]
+    encoding = screenshot["encoding"]
+    src = "data:#{mime_type}"
+    if encoding
+      src << ";#{encoding}"
+      src << ","
+      src << data
+    else
+      src << ";base64,"
+      src << [data].pack("m*")
+    end
+    tag.img(src: src)
+  end
 end

app/views/extractions/_extracted.html.erb

@@ -0,0 +1,30 @@
+<section class="metadata">
+  <h2>Metadata</h2>
+  <table>
+  <% @extracted.each do |key, value| -%>
+    <% next if key == "texts" -%>
+    <tr>
+      <th scope="row"><%= key %></th>
+      <td><%= value %></td>
+    </tr>
+  <% end -%>
+  </table>
+</section>
+
+<% (@extracted["texts"] || []).each_with_index do |text, i| -%>
+  <section class="text">
+    <h2>Text #<%= i + 1 %></h2>
+    <%= format_screenshot(text["screenshot"]) %>
+    <pre><%= text["body"] %></pre>
+    <table>
+      <% text.each do |key, value| -%>
+        <% next if key == "body" -%>
+        <% next if key == "screenshot" -%>
+        <tr>
+          <th scope="row"><%= key %></th>
+          <td><%= value %></td>
+        </tr>
+      <% end -%>
+    </table>
+  </section>
+<% end -%>

app/views/extractions/create.html.erb

@@ -2,4 +2,4 @@
 
 <%= render 'form', extraction: @extraction %>
 
-<pre><code><%= JSON.pretty_generate(@extraction.extract) %></code></pre>
+<%= render 'extracted', extracted: @extracted %>