Merge pull request #24 from nattvara/add-about-page

Add about page
nattvara · Mar 5, 2023 · e5ef8a8 · e5ef8a8
2 parents fcc09a1 + e4ffcd0
commit e5ef8a8
Show file tree

Hide file tree

Showing 15 changed files with 260 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -65,6 +65,10 @@ The lecture is ready. kthGPT can now use GPT-3 to answer questions about the lec
 > - Hans Peters, Game Theory: A Multi-Leveled Approach, Springer 2008 (Chapter 6) provides a deep exploration of the topics discussed in this lecture. It includes discussion on transferable utility and the core, super-aditivity, and finding efficient outcomes in non-zero sum games, as well as balancing games and linear programming.
 >
 
+**- If i didn't attend this lecture what would I have to read-up on?**
+>
+> Tends to produce quite brief answers, with very "google:able" keywords.
+
 ## Run the tool locally
 
 ### Docker

diff --git a/web-ui/.umirc.ts b/web-ui/.umirc.ts
@@ -7,6 +7,7 @@ export default defineConfig({
     { path: '/questions/lectures/:id/:language', component: 'questions' },
     { path: '/queue', component: 'queue' },
     { path: '/denied', component: 'denied' },
+    { path: '/about', component: 'about' },
 
     { path: '*', component: '404' },
   ],

diff --git a/web-ui/Dockerfile b/web-ui/Dockerfile
@@ -9,6 +9,7 @@ COPY pnpm-lock.yaml .
 COPY src ./src
 COPY tsconfig.json .
 COPY typings.d.ts .
+COPY update_version.sh .
 
 RUN npm install -g pnpm
 RUN pnpm install

diff --git a/web-ui/package.json b/web-ui/package.json
@@ -3,7 +3,7 @@
   "author": "Ludwig Kristoffersson <[email protected]>",
   "scripts": {
     "dev": "ENVIRONMENT=development umi dev",
-    "build": "COMPRESS=none ENVIRONMENT=production umi build",
+    "build": "sh update_version.sh && COMPRESS=none ENVIRONMENT=production umi build",
     "postinstall": "umi setup",
     "setup": "umi setup",
     "start": "ENVIRONMENT=development npm run dev",

diff --git a/web-ui/src/components/lecture.tsx → web-ui/src/components/lecture.ts b/web-ui/src/components/lecture.tsx → web-ui/src/components/lecture.ts
diff --git a/web-ui/src/components/main/frame.tsx b/web-ui/src/components/main/frame.tsx
@@ -1,9 +1,12 @@
-import { GithubOutlined } from '@ant-design/icons';
+import { FileTextOutlined, GithubOutlined } from '@ant-design/icons';
 import styles from './frame.less';
-import { Space, Row, Col, Layout, Image, Button } from 'antd';
+import { Space, Row, Col, Layout, Image, Button, Typography } from 'antd';
 import kthLogo from '../../assets/logo.svg';
 import Progress from './progress';
 import { history } from 'umi';
+import { buildDate, isProduction } from '@/version';
+
+const { Link } = Typography;
 
 const GITHUB_URL = 'https://github.com/nattvara/kthGPT';
 
@@ -51,11 +54,31 @@ function Frame(props: FrameProps) {
                 <h1 className={styles.subtitle}>
                   Ask GPT-3 questions about KTH lectures
                 </h1>
-                <p className={styles.subtitle}>
-                  <Button type="dashed" onClick={() => goToGithub()}>
-                    <GithubOutlined /> Source Code
-                  </Button>
-                </p>
+                <div className={styles.subtitle}>
+                  <Space direction="horizontal">
+                    <Button type="dashed" onClick={() => goToGithub()}>
+                      <GithubOutlined /> Source Code
+                    </Button>
+                    <Link href="/about">
+                      <Button type="dashed">
+                        <FileTextOutlined /> About
+                      </Button>
+                    </Link>
+                    <Link
+                      href="https://github.com/nattvara/kthGPT/releases"
+                      target="_blank"
+                    >
+                      <Button type="dashed">
+                        {isProduction && (
+                          <>
+                            kthGPT <strong>{buildDate}</strong> Version
+                          </>
+                        )}
+                        {!isProduction && <>Development build</>}
+                      </Button>
+                    </Link>
+                  </Space>
+                </div>
               </>
             )}
           </div>

diff --git a/web-ui/src/components/questions/questions.tsx b/web-ui/src/components/questions/questions.tsx
@@ -33,6 +33,13 @@ const examples = [
     queryStringSv:
       'Förklara kärnbegreppen i denna föreläsning, med några användbara exempel',
   },
+  {
+    titleEn: `I didn't go to the lecture, what have i missed?`,
+    titleSv: 'Jag gick inte på föreläsningen, vad har jag missat?',
+    queryStringEn: `If i didn't attend this lecture what would I have to read-up on?`,
+    queryStringSv:
+      'Om jag inte deltog på den här föreläsningen, vad skulle jag behöva läsa på om?',
+  },
   {
     titleEn: 'At which point in the lecture is X covered?',
     titleSv: 'När i föreläsningen berättar föreläsaren om X?',

diff --git a/web-ui/src/components/selector/lecture-adder.less b/web-ui/src/components/selector/lecture-adder.less
@@ -35,3 +35,7 @@
     width: 250px;
   }
 }
+
+.length_note {
+  margin-bottom: 30px !important;
+}
diff --git a/web-ui/src/components/selector/lecture-adder.tsx b/web-ui/src/components/selector/lecture-adder.tsx
@@ -358,6 +358,11 @@ export default function LectureAdder() {
         </Title>
       </Paragraph>
 
+      <Paragraph className={styles.length_note}>
+        This process usually takes between 10 and 30 minutes, depending on the
+        length of the lecture and how many other lectures are being watched.
+      </Paragraph>
+
       <Space direction="vertical" style={{ width: '100%' }} size="large">
         {error !== '' && (
           <Row justify="center">

diff --git a/web-ui/src/components/selector/selector.tsx b/web-ui/src/components/selector/selector.tsx
@@ -64,7 +64,7 @@ export default function Selector() {
           ...or add a new lecture <VideoCameraAddOutlined />
         </Title>
         <Title level={5} className={styles.subtitle}>
-          Ask kthGPT to watch a new lecture
+          Ask kthGPT to watch a new lecture, it's completely automatic.
         </Title>
 
         <LectureAdder />

diff --git a/web-ui/src/http.tsx → web-ui/src/http.ts b/web-ui/src/http.tsx → web-ui/src/http.ts
diff --git a/web-ui/src/pages/about.less b/web-ui/src/pages/about.less
@@ -0,0 +1,4 @@
+
+.page {
+  margin-bottom: 300px;
+}
diff --git a/web-ui/src/pages/about.tsx b/web-ui/src/pages/about.tsx
@@ -0,0 +1,183 @@
+import Frame from '@/components/main/frame';
+import { registerPageLoad } from '@/matomo';
+import { LeftOutlined } from '@ant-design/icons';
+import { Row, Col, Typography, Button } from 'antd';
+import { useEffect } from 'react';
+import styles from './about.less';
+
+const { Paragraph, Title, Link } = Typography;
+
+export default function AboutPage() {
+  useEffect(() => {
+    registerPageLoad();
+  }, []);
+
+  return (
+    <>
+      <Frame>
+        <div className={styles.page}>
+          <Row justify="center">
+            <Col sm={24} md={15}>
+              <Link href="/">
+                <Button type="primary">
+                  <LeftOutlined /> Back
+                </Button>
+              </Link>
+            </Col>
+          </Row>
+          <Row justify="center">
+            <Col sm={24} md={15}>
+              <Title>About kthGPT</Title>
+              <Paragraph>
+                kthGPT is a free and open source tool that can watch a lecture
+                for you. It allows students to ask questions about any lecture
+                using the GPT-3 model.
+              </Paragraph>
+              <Paragraph>
+                <blockquote>
+                  This project <strong>is not</strong> affiliated with KTH. It's
+                  just a tool that's meant to be useful for KTH students.
+                </blockquote>
+              </Paragraph>
+
+              <Title>How to use it</Title>
+              <Title level={3}>1. Select lecture</Title>
+              <Paragraph>
+                Select a lecture that's already been watched or add a new one!
+                kthGPT can watch lectures hosted on
+                <span> </span>
+                <Link href="https://play.kth.se/" target="_blank">
+                  KTH Play
+                </Link>
+                <span> </span>
+                or
+                <span> </span>
+                <Link href="https://youtube.com" target="_blank">
+                  YouTube
+                </Link>
+                .
+              </Paragraph>
+              <Paragraph>
+                It can't watch any video on YouTube. Due to limited capacity
+                kthGPT will only watch "relevant videos". Relevant videos are
+                such that it thinks are <code>Recorded Lectures</code>. kthGPT
+                uses a sample of the video to do this assessment.
+              </Paragraph>
+
+              <Title level={3}>2. Wait for kthGPT to "watch" the lecture</Title>
+              <Paragraph>
+                If the video has not been watched by kthGPT before, it will
+                start watching the video and try to produce a summary. It will
+                only listen to the audio, so nothing been shown or written in
+                the lecture will be included in the summary.
+              </Paragraph>
+              <Paragraph>
+                This process is very resource intensive and usually takes
+                between 20-60 minutes. This will be slower if many videos have
+                been queued.
+              </Paragraph>
+              <Paragraph>
+                If the audio quality in the video is bad, the quality of the
+                summary will be worse. kthGPT is generally best at understanding
+                English. However, if the audio quality is good, Swedish should
+                be just fine as well.
+              </Paragraph>
+
+              <Title level={3}>3. Ask questions about the lecture</Title>
+              <Paragraph>
+                The lecture is ready. kthGPT can now use GPT-3 to answer
+                questions about the lecture. Some useful queries:
+              </Paragraph>
+
+              <Title level={5}>
+                <blockquote>
+                  Summarize the lecture for me into 10 bullets
+                </blockquote>
+              </Title>
+              <Paragraph>
+                This query obviously useful to get a brief overview about what's
+                covered in the lecture
+              </Paragraph>
+
+              <Title level={5}>
+                <blockquote>
+                  Tell me the core concepts covered in the lecture and give some
+                  explanations for each
+                </blockquote>
+              </Title>
+              <Paragraph>
+                This usually produce very good results. Answers seem to be less
+                inclined to summarise the audio transcript and focus more on the
+                topics. Which seem to produce more accurate results.
+              </Paragraph>
+
+              <Title level={5}>
+                <blockquote>
+                  At which point in the lecture is X covered?
+                </blockquote>
+              </Title>
+              <Paragraph>
+                Pretty self explanatory, useful to quickly now where to look in
+                a lecture.
+              </Paragraph>
+
+              <Title level={5}>
+                <blockquote></blockquote>
+              </Title>
+              <Paragraph></Paragraph>
+
+              <Title level={5}>
+                <blockquote>
+                  Where in the course book "X" can i read more about the topics
+                  from this lecture?
+                </blockquote>
+              </Title>
+              <Paragraph>
+                Very useful to find more reading instructions.
+              </Paragraph>
+              <Paragraph>
+                In
+                <span> </span>
+                <Link href="/questions/lectures/0_xkulq3st/en" target="_blank">
+                  this lecture
+                </Link>
+                <span> </span>
+                the following question:
+              </Paragraph>
+              <Paragraph>
+                <span>- </span>
+                <em>
+                  Where in the course book "Hans Peters, Game Theory: A
+                  Multi-Leveled Approach, Springer 2008" can i read more about
+                  the topics from this lecture?
+                </em>
+              </Paragraph>
+              <Paragraph>Produce the following results:</Paragraph>
+              <Paragraph>
+                <em>
+                  - Hans Peters, Game Theory: A Multi-Leveled Approach, Springer
+                  2008 (Chapter 6) provides a deep exploration of the topics
+                  discussed in this lecture. It includes discussion on
+                  transferable utility and the core, super-aditivity, and
+                  finding efficient outcomes in non-zero sum games, as well as
+                  balancing games and linear programming.
+                </em>
+              </Paragraph>
+
+              <Title level={5}>
+                <blockquote>
+                  If i didn't attend this lecture what would I have to read-up
+                  on?
+                </blockquote>
+              </Title>
+              <Paragraph>
+                Tends to produce quite brief answers, with very "google:able"
+                keywords.
+              </Paragraph>
+            </Col>
+          </Row>
+        </div>
+      </Frame>
+    </>
+  );
+}
diff --git a/web-ui/src/version.ts b/web-ui/src/version.ts
@@ -0,0 +1,9 @@
+export const buildDate = 'BUILD_DATE';
+
+export let isProduction: boolean;
+
+if (process.env.NODE_ENV === 'production') {
+  isProduction = true;
+} else {
+  isProduction = false;
+}
diff --git a/web-ui/update_version.sh b/web-ui/update_version.sh
@@ -0,0 +1,10 @@
+#!/usr/bin/env bash
+
+PLACEHOLDER_STRING="BUILD_DATE"
+DATE_STRING="$(date '+%B %-d')"
+
+while IFS= read -r line; do
+    echo "${line//$PLACEHOLDER_STRING/$DATE_STRING}"
+done < "src/version.ts" > "src/version.ts.tmp"
+
+mv src/version.ts.tmp src/version.ts