Merge pull request #1857 from compdemocracy/te-stream-ai

make report narrative stream

client-report/src/components/app.js

@@ -9,6 +9,7 @@ import React from "react";
 import _ from "lodash";
 
 import * as globals from "./globals";
+import URLs from "../util/url";
 import DataUtils from "../util/dataUtils";
 // import Matrix from "./correlationMatrix/matrix";
 import Heading from "./framework/heading";
@@ -65,6 +66,8 @@ class App extends React.Component {
         disagree: globals.brandColors.disagree,
         pass: globals.brandColors.pass,
       },
+      narrative: {
+      },
     };
   }
 
@@ -119,11 +122,35 @@ class App extends React.Component {
     });
   }
 
-  getNarrative(report_id) {
-    return net.polisGet("/api/v3/reportNarrative", {
-      report_id: report_id,
+  async getNarrative(report_id) {
+    const urlPrefix = URLs.urlPrefix;
+    const response = await fetch(`${urlPrefix}api/v3/reportNarrative?report_id=${report_id}`, {
+      credentials: "include",
+      method: "get",
+      headers: {
+        Accept: "application/json, text/plain, */*",
+        "Content-Type": "application/json",
+      },
     });
+    if (!response.ok || !response.body) {
+      throw response.statusText;
+    }
+
+    const reader = response.body.getReader();
+    const decoder = new TextDecoder();
+    const loopRunner = true;
+
+    while (loopRunner) { // streaming response - the loop will run indefinetly until the response ends - this is a streaming function to improve UX and prevent cloud runners (like heroku) from terminating a long running http request
+      const { value, done } = await reader.read();
+      if (done) {
+        break;
+      }
+      const decodedChunk = decoder.decode(value, { stream: true });
+
+      if (!decodedChunk.includes('POLIS-PING:')) this.setState(state => ({ narrative: Object.assign(state.narrative, JSON.parse(decodedChunk)) }))
+    }
   }
+
   getReport(report_id) {
     return net
       .polisGet("/api/v3/reports", {
@@ -217,7 +244,7 @@ class App extends React.Component {
     });
 
     const narrativePromise = reportPromise.then((report) => {
-      return this.state.isNarrativeReport ? this.getNarrative(report.report_id) : Promise.resolve();
+      if (this.state.isNarrativeReport) this.getNarrative(report.report_id);
     });
 
     Promise.all([
@@ -408,7 +435,7 @@ class App extends React.Component {
           repfulDisageeTidsByGroup: repfulDisageeTidsByGroup,
           formatTid: formatTid,
           report: report,
-          narrative: this.state.isNarrativeReport ? narrative : undefined,
+          // narrative: this.state.isNarrativeReport ? narrative : undefined,
           //conversationStats: conversationstats,
           computedStats: computedStats,
           nothingToShow: !comments.length || !groupDemographics.length,

client-report/src/components/lists/consensusNarrative.js

@@ -13,7 +13,7 @@ const ConsensusNarrative = ({
   model
 }) => {
   if (!narrative?.group_informed_consensus) {
-    return null;
+    return <div>Loading Consensus...</div>;
   }
   const txt = model === "claude" ? narrative.group_informed_consensus.responseClaude.content[0].text : narrative.group_informed_consensus.responseGemini;
 

client-report/src/components/lists/uncertaintyNarrative.js

@@ -17,7 +17,7 @@ const UncertaintyNarrative = ({
   narrative,
   model
 }) => {
-  if (!conversation || !narrative) {
+  if (!conversation || !narrative || !narrative?.uncertainty?.responseClaude) {
     return <div>Loading Uncertainty...</div>;
   }
 

server/app.ts

@@ -10,6 +10,9 @@ dotenv.config();
 
 import Promise from "bluebird";
 import express from "express";
+import compression from "compression";
+import cookieParser from "cookie-parser";
+import bodyParser from "body-parser";
 import morgan from "morgan";
 
 import Config from "./src/config";
@@ -222,16 +225,16 @@ helpersInitialized.then(
     app.use(middleware_responseTime_start);
 
     app.use(redirectIfNotHttps);
-    app.use(express.cookieParser());
-    app.use(express.bodyParser());
+    app.use(cookieParser());
+    // app.use(bodyParser());
     app.use(writeDefaultHead);
 
     if (devMode) {
-      app.use(express.compress());
+      app.use(compression());
     } else {
       // Cloudflare would apply gzip if we didn't
       // but it's about 2x faster if we do the gzip (for the inbox query on mike's account)
-      app.use(express.compress());
+      app.use(compression());
     }
     app.use(middleware_log_request_body);
     app.use(middleware_log_middleware_errors);