initial gpt dashboard plus backend to go with it

learning_observer/learning_observer/communication_protocol/query.py

@@ -90,7 +90,7 @@ def join(LEFT, RIGHT, LEFT_ON=None, RIGHT_ON=None):
     }
 
 
-def map(function, values, value_path=None, func_kwargs=None):
+def map(function, values, value_path=None, func_kwargs=None, parallel=False):
     """
     Map is used to run a function on the server, similar to `call`, over
     a list of values.
@@ -100,7 +100,8 @@ def map(function, values, value_path=None, func_kwargs=None):
         "function_name": function.__lo_name__,
         "values": values,
         "value_path": value_path,
-        "func_kwargs": func_kwargs
+        "func_kwargs": func_kwargs,
+        "parallel": parallel
     }
 
 

modules/lo_dash_react_components/package.json

@@ -47,6 +47,7 @@
     "react-router": "^6.8.2",
     "react-router-dom": "^6.8.2",
     "react-scripts": "^5.0.1",
+    "react-tooltip": "^5.20.0",
     "recharts": "^2.4.3",
     "web-vitals": "^2.1.4"
   },

modules/lo_dash_react_components/src/lib/components/LOPanelLayout.scss

@@ -7,7 +7,6 @@
     }
 
     .side-panel {
-        overflow: hidden;
         transition: all 0.3s ease-in-out;
     }
 }

modules/wo_bulk_essay_analysis/setup.cfg

@@ -0,0 +1,16 @@
+[metadata]
+name = Writing Observer Automated Essay Feedback
+description = Dashboard for interfacing a classroom of essays with automated feedback
+url = https://github.com/ETS-Next-Gen/writing_observer
+version = 0.1
+
+[options]
+packages = wo_bulk_essay_analysis
+include_package_data = true
+
+[options.entry_points]
+lo_modules =
+   wo_bulk_essay_analysis = wo_bulk_essay_analysis.module
+
+[options.package_data]
+wo_bulk_essay_analysis = dashboard/*

modules/wo_bulk_essay_analysis/setup.py

@@ -0,0 +1,10 @@
+'''
+Rather minimalistic install script. To install, run `python
+setup.py develop` or just install via requirements.txt
+'''
+
+from setuptools import setup, find_packages
+
+setup(
+    name="wo_bulk_essay_analysis"
+)

modules/wo_bulk_essay_analysis/wo_bulk_essay_analysis/assets/scripts.js

@@ -0,0 +1,142 @@
+/**
+ * General scripts used for the bulk essay analysis dashboard
+ */
+
+if (!window.dash_clientside) {
+  window.dash_clientside = {}
+}
+
+const createStudentCard = function (student) {
+  const header = {
+    namespace: 'dash_bootstrap_components',
+    type: 'CardHeader',
+    props: { children: student.profile.name.full_name }
+  }
+  const studentText = {
+    namespace: 'lo_dash_react_components',
+    type: 'WOAnnotatedText',
+    props: { text: student.text, breakpoints: [] }
+  }
+  const feedback = {
+    namespace: 'dash_html_components',
+    type: 'Div',
+    props: {
+      children: student?.feedback ? student.feedback : '',
+      className: student?.feedback ? 'border-start p-1 overflow-auto' : '',
+      style: { whiteSpace: 'pre-line' }
+    }
+  }
+  const body = {
+    namespace: 'lo_dash_react_components',
+    type: 'LOPanelLayout',
+    props: {
+      children: studentText,
+      panels: [{ children: feedback, id: 'feedback-text', width: '40%' }],
+      shown: feedback.props.children.length > 0 ? ['feedback-text'] : [],
+      className: 'overflow-auto p-1'
+    }
+  }
+  const card = {
+    namespace: 'dash_bootstrap_components',
+    type: 'Card',
+    props: {
+      children: [header, body],
+      style: { maxHeight: '300px' }
+    }
+  }
+  return {
+    namespace: 'dash_bootstrap_components',
+    type: 'Col',
+    props: {
+      children: card,
+      id: student.user_id,
+      width: 4
+    }
+  }
+}
+
+const createChatCard = function (chat, user) {
+  const teacher = (user === 'teacher')
+  const card = {
+    namespace: 'dash_bootstrap_components',
+    type: 'Card',
+    props: { children: chat, body: true, color: teacher ? '#6cc3d540' : '#fff' }
+  }
+  return {
+    namespace: 'dash_bootstrap_components',
+    type: 'Col',
+    props: {
+      children: card,
+      align: teacher ? 'end' : 'start',
+      width: 9
+    }
+  }
+}
+
+window.dash_clientside.bulk_essay_feedback = {
+  send_to_loconnection: async function (state, hash, clicks, query) {
+    if (state === undefined) {
+      return window.dash_clientside.no_update
+    }
+    if (state.readyState === 1) {
+      if (hash.length === 0) { return window.dash_clientside.no_update }
+      const decoded = decode_string_dict(hash.slice(1))
+      if (!decoded.course_id) { return window.dash_clientside.no_update }
+
+      decoded.gpt_prompt = ''
+      decoded.message_id = ''
+
+      const trig = window.dash_clientside.callback_context.triggered[0]
+      if (trig.prop_id.includes('bulk-essay-analysis-submit-btn')) {
+        decoded.gpt_prompt = query
+      }
+
+      const message = {
+        wo: {
+          execution_dag: 'writing_observer',
+          target_exports: ['gpt_bulk'],
+          kwargs: decoded
+        }
+      }
+      return JSON.stringify(message)
+    }
+    return window.dash_clientside.no_update
+  },
+
+  update_ui_upon_query_submission: async function (clicks, text, children) {
+    if (clicks > 0) {
+      const loading = {
+        namespace: 'dash_bootstrap_components',
+        type: 'Col',
+        props: {
+          children: {
+            namespace: 'dash_bootstrap_components',
+            type: 'Spinner',
+            props: { color: 'primary' }
+          },
+          align: 'start',
+          width: 8,
+          id: 'loading'
+        }
+      }
+      const newChildren = [loading, createChatCard(text, 'teacher')].concat(children)
+      return ['', newChildren]
+    }
+  },
+
+  update_student_grid: function (message) {
+    const cards = message.map((x) => {
+      return createStudentCard(x)
+    })
+    return cards
+  },
+
+  add_response_to_chat: function (message, children) {
+    const chatCard = createChatCard('Your feedback will appear next to each student card.', 'gpt')
+    const index = children.findIndex(item => item.props.id === 'loading')
+    if (index > -1) {
+      children[index] = chatCard
+    }
+    return children
+  }
+}

modules/wo_bulk_essay_analysis/wo_bulk_essay_analysis/dashboard/layout.py

@@ -0,0 +1,118 @@
+'''
+Define layout for dashboard that allows teachers to interface
+student essays with LLMs.
+'''
+import dash_bootstrap_components as dbc
+import lo_dash_react_components as lodrc
+
+from dash import html, dcc, callback, Patch, clientside_callback, ClientsideFunction, Output, Input, State
+
+prefix = 'bulk-essay-analysis'
+websocket = f'{prefix}-websocket'
+ws_store = f'{prefix}-ws-store'
+
+query_input = f'{prefix}-query-input'
+submit = f'{prefix}-submit-btn'
+chat = f'{prefix}-chat-panel'
+grid = f'{prefix}-essay-grid'
+
+welcome_message = ['Hello, welcome to the bulk essay analysis.', 'Provide a prompt and we will pass it along with each text into ChatGPT.']
+
+
+def layout():
+    '''
+    Generic layout function to create dashboard
+    '''
+    main = html.Div([
+        html.H2('Bulk Essay Analysis'),
+        dbc.Row(id=grid, class_name='g-2')
+    ], className='vh-100', style={'overflowY': 'auto', 'overflowX': 'hidden'})
+    starting_message = dbc.Col(
+        dbc.Card(
+            [html.P(message) for message in welcome_message],
+            body=True,
+            color='#fff'
+        ),
+        width=9,
+        align='start'
+    )
+    chat_panel = dbc.Row([
+        dbc.Col(
+            dbc.Row([starting_message], id=chat, class_name='h-100 flex-column-reverse flex-nowrap overflow-auto g-1'),
+            class_name='flex-grow-1 overflow-auto',
+        ),
+        dbc.Col(
+            dbc.InputGroup([
+                dbc.Textarea(id=query_input, placeholder='Type request here...', autofocus=True, value=''),
+                dbc.Button('Submit', id=submit, n_clicks=0, disabled=True),
+            ], class_name='p-1'),
+            width=12,
+            align='end'
+        ),
+    ], class_name='vh-100 flex-column')
+    cont = dbc.Container([
+        lodrc.LOPanelLayout(
+            main,
+            panels=[{'children': chat_panel, 'width': '25%', 'id': 'chat'}],
+            shown=['chat']
+        ),
+        lodrc.LOConnection(id=websocket),
+        dcc.Store(id=ws_store, data={})
+    ], fluid=True)
+    return dcc.Loading(cont)
+
+
+# send request to LOConnection
+clientside_callback(
+    ClientsideFunction(namespace='bulk_essay_feedback', function_name='send_to_loconnection'),
+    Output(websocket, 'send'),
+    Input(websocket, 'state'),  # used for initial setup
+    Input('_pages_location', 'hash'),
+    Input(submit, 'n_clicks'),
+    State(query_input, 'value'),
+)
+
+clientside_callback(
+    '''function (value) {
+        if (value.length === 0) { return true }
+        return false
+    }
+    ''',
+    Output(submit, 'disabled'),
+    Input(query_input, 'value')
+)
+
+clientside_callback(
+    ClientsideFunction(namespace='bulk_essay_feedback', function_name='update_ui_upon_query_submission'),
+    Output(query_input, 'value'),
+    Output(chat, 'children'),
+    Input(submit, 'n_clicks'),
+    State(query_input, 'value'),
+    State(chat, 'children')
+)
+
+# store message from LOConnection in storage for later use
+clientside_callback(
+    '''
+    function(message) {
+        const data = JSON.parse(message.data).wo.gpt_bulk
+        return data
+    }
+    ''',
+    Output(ws_store, 'data'),
+    Input(websocket, 'message')
+)
+
+clientside_callback(
+    ClientsideFunction(namespace='bulk_essay_feedback', function_name='update_student_grid'),
+    Output(grid, 'children'),
+    Input(ws_store, 'data')
+)
+
+clientside_callback(
+    ClientsideFunction(namespace='bulk_essay_feedback', function_name='add_response_to_chat'),
+    Output(chat, 'children', allow_duplicate=True),
+    Input(ws_store, 'data'),
+    State(chat, 'children'),
+    prevent_initial_call=True
+)