CoCalc -- ai.tsx

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
Path: blob/master/src/packages/next/pages/features/ai.tsx
Views: ⁶⁸⁷
1
/*
2
 *  This file is part of CoCalc: Copyright © 2021 Sagemath, Inc.
3
 *  License: MS-RSL – see LICENSE.md for details
4
 */
5

6
import { Flex, Layout } from "antd";
7

8
import AIAvatar from "@cocalc/frontend/components/ai-avatar";
9
import AnthropicAvatar from "@cocalc/frontend/components/anthropic-avatar";
10
import GoogleGeminiLogo from "@cocalc/frontend/components/google-gemini-avatar";
11
import MistralAvatar from "@cocalc/frontend/components/mistral-avatar";
12
import OllamaAvatar from "@cocalc/frontend/components/ollama-avatar";
13
import OpenAIAvatar from "@cocalc/frontend/components/openai-avatar";
14
import { DOC_AI } from "@cocalc/util/consts/ui";
15
import { COLORS } from "@cocalc/util/theme";
16
import Content from "components/landing/content";
17
import Footer from "components/landing/footer";
18
import Head from "components/landing/head";
19
import Header from "components/landing/header";
20
import Image from "components/landing/image";
21
import Info from "components/landing/info";
22
import LaTeX from "components/landing/latex";
23
import Pitch from "components/landing/pitch";
24
import SignIn from "components/landing/sign-in";
25
import { Paragraph, Text, Title } from "components/misc";
26
import A from "components/misc/A";
27
import { Customize } from "lib/customize";
28
import withCustomize from "lib/with-customize";
29
import AiLateXGenerate from "/public/features/ai-latex-generate.png";
30
import AiLaTeXHelpMeFix from "/public/features/ai-latex-help-me-fix.png";
31
import AILaTeXAnswer from "/public/features/ai-latex-maxwell-answer.png";
32
import AILLMQuery from "/public/features/ai-llm-cprogram-query.png";
33
import AILLMCprogramRun from "/public/features/ai-llm-cprogram-run.png";
34
import ChatGptInChatroom from "/public/features/chatgpt-fix-code.png";
35
import ChatGptGenerateCodeRun from "/public/features/chatgpt-generate-code-run.png";
36
import ChatGptGenerateCode from "/public/features/chatgpt-generate-code.png";
37
import ChatGptJupyterCell from "/public/features/chatgpt-jupyter-linear-regression-cell.png";
38
import ChatGptJupyterPrompt from "/public/features/chatgpt-jupyter-linear-regression-prompt.png";
39

40
const title = `AI Assistant`;
41
const component = title;
42

43
export default function AI({ customize }) {
44
  const {
45
    googleVertexaiEnabled,
46
    openaiEnabled,
47
    mistralEnabled,
48
    anthropicEnabled,
49
    ollamaEnabled,
50
  } = customize;
51

52
  const iconTxtStyle = {
53
    fontSize: "20px",
54
    verticalAlign: "text-bottom",
55
  };
56

57
  const codePrompt =
58
    "Write a short C program, which iterates over all numbers from 0 to 100 and sums up those, which are divisible by 7!";
59

60
  return (
61
    <Customize value={customize}>
62
      <Head title={`${title} | Features | CoCalc`} />
63
      <Layout>
64
        <Header page="features" subPage="ai" />
65
        <Layout.Content>
66
          <Content
67
            landing
68
            startup={component}
69
            body={<AIAvatar size={128} />}
70
            title={title}
71
            subtitleBelow={true}
72
            subtitle={
73
              <>
74
                <div>
75
                  CoCalc integrates large language models including{" "}
76
                  <A href="https://openai.com/">OpenAI's ChatGPT</A>,{" "}
77
                  <A href="https://deepmind.google/technologies/gemini/">
78
                    Google's Gemini
79
                  </A>
80
                  ,{" "}
81
                  <A href="https://www.anthropic.com/claude">
82
                    Anthropic's Claude
83
                  </A>
84
                  , and <A href="https://mistral.ai/">Mistral</A> as virtual
85
                  assistants. They generate human-like responses and code,
86
                  assist with programming, explain error messages, and
87
                  ultimately making it easier for you to get your work done.
88
                </div>
89
              </>
90
            }
91
            image={AILLMQuery}
92
            alt={"AI Assistant in CoCalc"}
93
            caption={"AI Assistant in CoCalc"}
94
          />
95

96
          <Pitch
97
            col1={
98
              <>
99
                <Title level={2}>Help with coding</Title>
100
                <Paragraph>
101
                  <li>Understand a vast array of programming languages.</li>
102
                  <li>Generate context-specific code based on your input.</li>
103
                  <li>
104
                    Interpret error messages, providing insightful suggestions.
105
                  </li>
106
                  <li>
107
                    Enhance code quality by modifying your provided code
108
                    snippets.
109
                  </li>
110
                </Paragraph>
111
              </>
112
            }
113
            col2={
114
              <>
115
                <Title level={2}>Virtual assistant</Title>
116
                <Paragraph>
117
                  <li>
118
                    These language models, as virtual assistants, rectify bugs,
119
                    comprehend and write code across many programming languages
120
                    in a very convenient way.
121
                  </li>
122
                  <li>They are capable of appending documentation to code.</li>
123
                  <li>
124
                    They can even build upon existing code based on provided
125
                    directives.
126
                  </li>
127
                </Paragraph>
128
              </>
129
            }
130
          />
131

132
          <Info.Heading
133
            style={{ backgroundColor: COLORS.BS_GREEN_LL }}
134
            description={
135
              <>
136
                <Paragraph style={{ marginTop: "20px" }}>
137
                  There are various places where an AI Assistant appears in
138
                  CoCalc, as illustrated below and{" "}
139
                  <A href={DOC_AI}>explained in the docs</A>.
140
                </Paragraph>
141
                <Paragraph>
142
                  CoCalc currently supports the following language models:
143
                </Paragraph>
144
                <Paragraph>
145
                  <Flex
146
                    style={{ margin: "20px" }}
147
                    justify="space-between"
148
                    align="center"
149
                    wrap="wrap"
150
                  >
151
                    {openaiEnabled ? (
152
                      <span style={{ margin: "10px", whiteSpace: "nowrap" }}>
153
                        <OpenAIAvatar size={32} />{" "}
154
                        <A
155
                          href="https://openai.com/chatgpt"
156
                          style={iconTxtStyle}
157
                        >
158
                          OpenAI's ChatGPT
159
                        </A>
160
                      </span>
161
                    ) : undefined}
162
                    {googleVertexaiEnabled ? (
163
                      <span style={{ margin: "10px", whiteSpace: "nowrap" }}>
164
                        <GoogleGeminiLogo size={32} />{" "}
165
                        <A
166
                          href="https://deepmind.google/technologies/gemini/"
167
                          style={iconTxtStyle}
168
                        >
169
                          Google's Gemini
170
                        </A>
171
                      </span>
172
                    ) : undefined}
173
                    {anthropicEnabled ? (
174
                      <span style={{ margin: "10px", whiteSpace: "nowrap" }}>
175
                        <AnthropicAvatar size={32} />{" "}
176
                        <A
177
                          href="https://www.anthropic.com/claude"
178
                          style={iconTxtStyle}
179
                        >
180
                          Anthropic's Claude
181
                        </A>
182
                      </span>
183
                    ) : undefined}
184
                    {mistralEnabled ? (
185
                      <span style={{ margin: "10px", whiteSpace: "nowrap" }}>
186
                        <MistralAvatar size={32} />{" "}
187
                        <A href="https://mistral.ai/" style={iconTxtStyle}>
188
                          Mistral
189
                        </A>
190
                      </span>
191
                    ) : undefined}
192
                    {ollamaEnabled ? (
193
                      <span style={{ margin: "10px", whiteSpace: "nowrap" }}>
194
                        <OllamaAvatar size={32} />{" "}
195
                        <A href="https://ollama.com/" style={iconTxtStyle}>
196
                          Ollama
197
                        </A>
198
                      </span>
199
                    ) : undefined}
200
                  </Flex>
201
                </Paragraph>
202
              </>
203
            }
204
          >
205
            AI language models in CoCalc
206
          </Info.Heading>
207

208
          <ChatGPTFixError />
209

210
          <Info
211
            title={"Mention AI models in any Chatroom in CoCalc"}
212
            icon="comment"
213
            image={ChatGptGenerateCode}
214
            anchor="a-mention"
215
            alt="ChatGPT generates code in a chatroom"
216
          >
217
            <Paragraph>
218
              Here, a user learning <A href="https://pytorch.org/">PyTorch</A>{" "}
219
              asks ChatGPT by{" "}
220
              <A href={`${DOC_AI}#chatgpt-in-chat-rooms-and-side-chat`}>
221
                mentioning
222
              </A>{" "}
223
              <Text code>@</Text> in a{" "}
224
              <A href="https://doc.cocalc.com/chat.html#side-chat">Side Chat</A>
225
              . The prompt is:
226
            </Paragraph>
227
            <Paragraph>
228
              <blockquote>multiply two random matrices in pytorch</blockquote>
229
            </Paragraph>
230
            <Paragraph>
231
              Sure enough, ChatGPT generates code that does exactly that. By
232
              copying that simple example into your Jupyter Notebook, the user
233
              can immediately run it and continue to play around with it.
234
            </Paragraph>
235
            <Paragraph>
236
              <Image
237
                src={ChatGptGenerateCodeRun}
238
                alt="Running code snippet generated by ChatGPT"
239
              />
240
            </Paragraph>
241
            {googleVertexaiEnabled ? (
242
              <Paragraph>
243
                Note: Use @ also to talk to Google's Gemini model.
244
              </Paragraph>
245
            ) : undefined}
246
          </Info>
247

248
          <Info
249
            narrow
250
            title={"Generate Jupyter Cells"}
251
            icon="jupyter"
252
            anchor="a-jupyter"
253
            alt="Generate Jupyter Cells"
254
            image={ChatGptJupyterCell}
255
            style={{ backgroundColor: COLORS.BLUE_LLLL }}
256
          >
257
            <Paragraph>
258
              In a <A href="./jupyter-notebook">Jupyter Notebook</A>, you can
259
              tell a language model to generate a cell for you. This is useful
260
              if you want to explore a topic, but don't know where to start. In
261
              the example on the left, we ask ChatGPT to generate a cell for us
262
              about a linear regression for a stochastic process:
263
            </Paragraph>
264
            <Paragraph>
265
              <Image
266
                src={ChatGptJupyterPrompt}
267
                alt="ChatGPT cell prompt in Jupyter Notebook"
268
              />
269
            </Paragraph>
270
          </Info>
271

272
          <Info
273
            title={"Generating Code"}
274
            icon="pen"
275
            image={AILLMCprogramRun}
276
            anchor="a-cpp"
277
            alt="Gemini generates C++ code in a file"
278
            narrow
279
            caption={<blockquote>{codePrompt}</blockquote>}
280
            below={
281
              <Paragraph>
282
                After the code is generated, we copy it into the
283
                <Text code>c-program.cpp</Text> file as depicted. To compile and
284
                run the C++ program, we use the <Text code>clang++</Text>{" "}
285
                compiler provided in the{" "}
286
                <A href="https://doc.cocalc.com/frame-editor.html">
287
                  Frame Editor's
288
                </A>{" "}
289
                <A href="/features/terminal">Terminal</A>.
290
              </Paragraph>
291
            }
292
          >
293
            <Paragraph>
294
              ChatGPT or Gemini can also generate source code for you. In the
295
              example displayed on the left, we first create an empty file named{" "}
296
              <Text code>c-program.cpp</Text> in C++. Next, we open the AI
297
              Assistant dialogue and prompt it to generate some code:
298
            </Paragraph>
299
            <Paragraph>
300
              <Image src={AILLMQuery} alt={codePrompt} />
301
            </Paragraph>
302
          </Info>
303

304
          <Info
305
            title={
306
              <>
307
                Help with <LaTeX />
308
              </>
309
            }
310
            icon="question-circle"
311
            anchor="a-latex"
312
            alt="Help with LaTeX"
313
            image={AiLateXGenerate}
314
            style={{ backgroundColor: COLORS.BLUE_LLLL }}
315
            below={
316
              <>
317
                <Paragraph>
318
                  On top of that, it can even assist you in{" "}
319
                  <Text strong>fixing LaTeX error messages</Text>. the "Help me
320
                  fix this…" button, and CoCalc will submit the error message,
321
                  some context, and a prompt for correction. This will provide
322
                  you with a useful indicator of the issue and potential
323
                  solutions.
324
                </Paragraph>
325
                <Paragraph style={{ textAlign: "center" }}>
326
                  <Image
327
                    src={AiLaTeXHelpMeFix}
328
                    alt="ChatGPT helps with LaTeX error messages"
329
                  />
330
                </Paragraph>
331
              </>
332
            }
333
          >
334
            <Paragraph>
335
              Writing documents in the typesetting language{" "}
336
              <A href="./latex-editor">LaTeX</A> can be challenging. In the
337
              example on the left, we ask ChatGPT to generate the LaTeX formulas
338
              for the Maxell equations. Sure enough, it answers with a short
339
              explanation and a snippet of LaTeX code.
340
            </Paragraph>
341
            <Paragraph>
342
              <Image
343
                src={AILaTeXAnswer}
344
                alt="ChatGPT generates LaTeX code for Maxwell equations"
345
              />
346
            </Paragraph>
347
          </Info>
348

349
          <SignIn startup={component} />
350
        </Layout.Content>
351
        <Footer />
352
      </Layout>
353
    </Customize>
354
  );
355
}
356

357
export async function getServerSideProps(context) {
358
  return await withCustomize({ context });
359
}
360

361
export function ChatGPTFixError({ embedded = false }: { embedded?: boolean }) {
362
  const title = embedded ? "ChatGPT fixes code" : "Help fixing code";
363

364
  // a general intro about what this is, if this block is embeded on another page
365
  function intro() {
366
    if (!embedded) return null;
367
    return (
368
      <Paragraph>
369
        Use the power of <A href="/features/ai">ChatGPT</A> to help fixing
370
        errors or to generate code.
371
      </Paragraph>
372
    );
373
  }
374

375
  return (
376
    <Info
377
      title={title}
378
      icon="bug"
379
      image={ChatGptInChatroom}
380
      anchor="a-chatgpt-notebook"
381
      alt="ChatGPT explains an error message and fixes code"
382
      wide
383
    >
384
      {intro()}
385
      <Paragraph>
386
        In this example, a code cell in a{" "}
387
        <A href="/features/jupyter-notebook">Jupyter Notebook</A> returned an
388
        error. Clicking the botton to explain the error message creates a
389
        message addressed to ChatGPT, which asks for help and to fix the code.
390
      </Paragraph>
391
      <Paragraph>
392
        With enough context – the few lines of input code and the lines in the
393
        stacktrace – it will attempt to fix the code for you. The fix might not
394
        be perfect, but it can be a good starting point.
395
      </Paragraph>
396
    </Info>
397
  );
398
}
399

400
Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

Product

Resources

Company

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more, all in one place.

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.
