Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.
Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place. Commercial Alternative to JupyterHub.
Path: blob/master/src/packages/next/components/landing/cocalc-com-features.tsx
Views: 923
/*1* This file is part of CoCalc: Copyright © 2023 Sagemath, Inc.2* License: MS-RSL – see LICENSE.md for details3*/45import { Button, Col, Grid, Row } from "antd";6import { join } from "path";7import { useEffect, useState } from "react";89import { SOFTWARE_ENVIRONMENT_ICON } from "@cocalc/frontend/project/settings/software-consts";10import { DOC_AI } from "@cocalc/util/consts/ui";11import { COLORS } from "@cocalc/util/theme";12import Path from "components/app/path";13import DemoCell from "components/demo-cell";14import { AvailableTools, Tool } from "components/landing/available-tools";15import Info from "components/landing/info";16import { CSS, Paragraph, Text } from "components/misc";17import A from "components/misc/A";18import ChatGPTHelp from "components/openai/chatgpt-help";19import {20Testimonial,21TestimonialComponent,22twoRandomTestimonials,23} from "components/testimonials";24import basePath from "lib/base-path";25import { useCustomize } from "lib/customize";26import assignments from "public/features/cocalc-course-assignments-2019.png";27import RTC from "public/features/cocalc-real-time-jupyter.png";28import ComputeServers from "./compute-servers";29import { LANDING_HEADER_LEVEL } from "./constants";3031// NOTE: This component is only rendered if the onCoCalcCom customization variable is "true"32export function CoCalcComFeatures() {33const {34siteName = "CoCalc",35openaiEnabled,36sandboxProjectId,37jupyterApiEnabled,38shareServer = false,39onCoCalcCom,40} = useCustomize();41const width = Grid.useBreakpoint();4243// to avoid next-js hydration errors44const [testimonials, setTestimonials] =45useState<[Testimonial, Testimonial]>();4647useEffect(() => {48setTestimonials(twoRandomTestimonials());49}, []);5051function renderCollaboration(): JSX.Element {52return (53<Info54level={LANDING_HEADER_LEVEL}55title="Realtime Collaboration Using Your Favorite Tools"56icon="users"57image={RTC}58anchor="a-realtimesync"59alt={"Two browser windows editing the same Jupyter notebook"}60style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}61belowWide={true}62icons={[63{ icon: "jupyter", link: "/features/jupyter-notebook" },64{ icon: "tex", title: "LaTeX", link: "/features/latex-editor" },65{ icon: "slides", title: "Whiteboard", link: "/features/whiteboard" },66]}67>68<Paragraph>69With {siteName}, you can easily collaborate with colleagues, students,70and friends to edit computational documents. We support{" "}71<A href={"/features/jupyter-notebook"}>72<strong>Jupyter Notebooks</strong>73</A>74, <A href={"/features/latex-editor"}>LaTeX files</A>,{" "}75<A href="/features/sage">SageMath Worksheets</A>,{" "}76<A href={"/features/whiteboard"}>Computational Whiteboards</A>, and77much more. We have an{" "}78<A href={"https://doc.cocalc.com/why.html#open-world-approach"}>79open world approach80</A>{" "}81giving users as much flexibility in choosing software and hardware as82possible.83</Paragraph>8485<Paragraph>86You and your collaborators use the same per-project environment, which87provides consistent results, synchronized file changes, and automatic88revision history so that you can go back in time when you need to89discover what changed and when. {renderShareServer()}90</Paragraph>9192<Paragraph>93Forget the frustration of sending files back and forth between your94collaborators, wasting time reviewing changes, and merging documents.{" "}95<A href={"/auth/sign-up"}>Get started with {siteName} today.</A>96</Paragraph>97</Info>98);99}100101function renderTeaching() {102return (103<Info104level={LANDING_HEADER_LEVEL}105title="Integrated Course Management System"106icon="graduation-cap"107image={assignments}108anchor="a-teaching"109alt={"Two browser windows editing the same Jupyter notebook"}110style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}111icons={[112{113icon: "users",114title: "Course Management",115link: "https://doc.cocalc.com/teaching-instructors.html",116},117{118icon: "graduation-cap",119title: "NBGrader",120link: "https://doc.cocalc.com/teaching-nbgrader.html",121},122{ icon: "slides", title: "Slides", link: "/features/whiteboard" },123]}124>125<Paragraph>126You can think of {siteName} as{" "}127<Text strong>virtual computer lab</Text> in the cloud. It takes away128the pain of teaching scientific software.129</Paragraph>130<Paragraph>131<Text strong>Hassle-free assignments</Text>: {siteName} keeps all132files well organized! Due to real-time synchronization you never have133to deal with multiple versions of the same file. There is even support134for{" "}135<A href={"https://doc.cocalc.com/teaching-nbgrader.html"}>136automated grading via NBGrader137</A>138.139</Paragraph>140<Paragraph>141<Text strong>Pre-installed Software</Text> like in a computer lab,{" "}142<A href={"/software"}>all software you need</A> is already installed143and ready to use.144</Paragraph>145<Paragraph>146<Text strong>Real-time Collaboration</Text> allows you to virtually147look students over their shoulders. You can check their work directly148and help them by editing the file or using side-chat communication.149</Paragraph>150<Paragraph>151<Button152onClick={() =>153(window.location.href = join(basePath, "/features/teaching"))154}155>156More about teaching on {siteName}157</Button>158</Paragraph>159</Info>160);161}162163function renderSandbox() {164if (!sandboxProjectId) return;165return (166<Info167level={LANDING_HEADER_LEVEL}168title={<>The Public {siteName} Sandbox</>}169icon="share-square"170anchor="a-sandbox"171style={{ backgroundColor: COLORS.GRAY_LLL }}172>173<Path174style={{ marginBottom: "15px" }}175project_id={sandboxProjectId}176description="Public Sandbox"177/>178</Info>179);180}181182function renderShareServer() {183if (!shareServer) return;184185return (186<>187{" "}188You can even publish your {siteName} creations to share with anyone via189the built-in <A href={"/share/public_paths/page/1"}>share server</A>.190</>191);192}193194function renderMore(): JSX.Element {195const text = {196software: `All available software`,197whiteboard: `Computational whiteboard`,198features: `Features overview`,199};200const software = (201<Paragraph style={{ textAlign: "center" }}>202<Button203onClick={() => (window.location.href = join(basePath, "/software"))}204title={text.software}205>206{text.software}207</Button>208</Paragraph>209);210const whiteboard = (211<Paragraph style={{ textAlign: "center" }}>212<Button213onClick={() =>214(window.location.href = join(basePath, "/features/whiteboard"))215}216title={text.whiteboard}217>218{text.whiteboard}219</Button>220</Paragraph>221);222const features = (223<Paragraph style={{ textAlign: "center" }}>224<Button225onClick={() => (window.location.href = join(basePath, "/features"))}226title={text.features}227>228{text.features}229</Button>230</Paragraph>231);232return (233<Info234level={LANDING_HEADER_LEVEL}235title="Much More …"236icon="wrench"237anchor="more"238style={{ backgroundColor: COLORS.YELL_LLL }}239>240<Row>241<Col md={8}>242<Tool243icon={SOFTWARE_ENVIRONMENT_ICON}244href="/software"245title="Available Software"246alt="Available Software"247>248<Paragraph>249{siteName} comes with a variety of software pre-installed,250including251<A href={"/features/python"}>Python</A>,{" "}252<A href={"/features/sage"}>SageMath</A>,{" "}253<A href={"/features/r-statistical-software"}>R</A> and{" "}254<A href={"/features/julia"}>Julia</A> . You can{" "}255<A256href={"https://doc.cocalc.com/howto/install-python-lib.html"}257>258install additional software259</A>{" "}260directly in your project as well.261</Paragraph>262{!width.md && software}263</Tool>264</Col>265<Col md={8}>266<Tool267icon="layout"268href="/features/whiteboard"269title="Computational Whiteboard"270alt="Computational Whiteboard"271>272<Paragraph>273Use a full featured collaborative whiteboard – with support for274Jupyter notebook cells – to express and share your ideas.275</Paragraph>276{!width.md && whiteboard}277</Tool>278</Col>279<Col md={8}>280<Tool281icon="wrench"282href="/features"283alt="Features"284title="Feature Overview"285>286<Paragraph>287{siteName} offers a variety of features to make your life288easier. You can find a list of all features{" "}289<A href="/features">here</A>.290</Paragraph>291{!width.md && features}292</Tool>293</Col>294{width.md && (295<>296<Col md={8}>{software}</Col>297<Col md={8}>{whiteboard}</Col>298<Col md={8}>{features}</Col>299</>300)}301</Row>302</Info>303);304}305306function renderAvailableProducts(): JSX.Element {307const txtCol = COLORS.GRAY_LL;308const toolCol = "white";309310const link: CSS = {311color: "white",312fontWeight: "bold",313} as const;314315const bottom: CSS = {316color: txtCol,317textAlign: "center",318fontSize: "150%",319} as const;320321const urlProducts = "/pricing/products";322const urlCourses = "/pricing/courses";323const urlOnprem = "/pricing/onprem";324325const productsLink = (326<Paragraph style={bottom}>327<Button328ghost329size="large"330style={{ fontWeight: "bold" }}331onClick={() => (window.location.href = join(basePath, urlProducts))}332title={"Products Overview"}333>334Products Overview335</Button>336</Paragraph>337);338339const courseLink = (340<Paragraph style={bottom}>341<Button342ghost343size="large"344style={{ fontWeight: "bold" }}345onClick={() => (window.location.href = join(basePath, urlCourses))}346title={"Course Licenses"}347>348Course Licenses349</Button>350</Paragraph>351);352353const onpremLink = (354<Paragraph style={bottom}>355<Button356ghost357size="large"358style={{ fontWeight: "bold" }}359onClick={() => (window.location.href = join(basePath, urlOnprem))}360title={"On-Premises Offerings"}361>362On-Premises Offerings363</Button>364</Paragraph>365);366367return (368<Info369level={LANDING_HEADER_LEVEL}370title="Solutions"371icon="shopping-cart"372anchor="products"373style={{ backgroundColor: COLORS.BLUE_D }}374textStyle={{ color: COLORS.GRAY_LL }}375>376<Row>377<Col md={8}>378<Tool379icon="server"380href={urlProducts}381title="Online Service with GPUs"382alt="Online Service"383textStyle={{ color: toolCol }}384>385<Paragraph style={{ color: txtCol }}>386You can start using {siteName} online for free today.{" "}387<A href={"/auth/sign-up"} style={link}>388Create an account389</A>390, open your{" "}391<A style={link} href={"https://doc.cocalc.com/trial.html"}>392trial project393</A>{" "}394and{" "}395<A396style={link}397href={"https://doc.cocalc.com/getting-started.html"}398>399start exploring400</A>{" "}401{siteName}.402</Paragraph>403<Paragraph style={{ color: txtCol }}>404Upgrade your projects to unlock internet access, better hosting405quality, and other upgrades by purchasing a{" "}406<A style={link} href={"/store/site-license"}>407license408</A>{" "}409or upgrade via{" "}410<A style={link} href={"https://doc.cocalc.com/paygo.html"}>411pay-as-you-go412</A>{" "}413and use GPUs and HPC resources via{" "}414<A415style={link}416href={"https://doc.cocalc.com/compute_server.html"}417>418compute servers419</A>420!421</Paragraph>422{!width.md && productsLink}423</Tool>424</Col>425<Col md={8}>426<Tool427icon="graduation-cap"428href={urlCourses}429title="Teach a Course"430alt="Teach a Course"431textStyle={{ color: toolCol }}432>433<Paragraph style={{ color: txtCol }}>434You can{" "}435<A style={link} href="/features/teaching">436teach a course437</A>{" "}438on {siteName} online!439</Paragraph>440<Paragraph style={{ color: txtCol }}>441The{" "}442<A style={link} href="pricing/courses">443course license options444</A>{" "}445are very flexible: they range from small professional training446up to large university courses. The students can pay {siteName}{" "}447directly, or you can pay on their behalf, and it is easy to448change a license at any time if you need more resources or the449number of students changes.450</Paragraph>451{!width.md && courseLink}452</Tool>453</Col>454<Col md={8}>455<Tool456icon="network-wired"457href={urlOnprem}458alt="On-Premises"459title={"On-Premises"}460textStyle={{ color: toolCol }}461>462<Paragraph style={{ color: txtCol }}>463It is very easy to run {siteName} on your own computer or464cluster. The available options are:465<ol>466<li>467Make your computer available in a {siteName} project via an{" "}468<A469style={link}470href={"https://doc.cocalc.com/compute_server.html"}471>472on-prem compute server473</A>474.475</li>476<li>477Deploy a highly scalable variant of {siteName} on your{" "}478<strong>Kubernetes cluster</strong> via{" "}479<A style={link} href="https://onprem.cocalc.com/">480<strong>CoCalc OnPrem</strong>481</A>482.483</li>484</ol>485</Paragraph>486{!width.md && onpremLink}487</Tool>488</Col>489{width.md && (490<>491<Col md={8}>{productsLink}</Col>492<Col md={8}>{courseLink}</Col>493<Col md={8}>{onpremLink}</Col>494</>495)}496</Row>497</Info>498);499}500501function renderTestimonials() {502if (!testimonials) return;503const [t1, t2] = testimonials;504return (505<Info506level={LANDING_HEADER_LEVEL}507title="Testimonials"508icon="comment"509anchor="testimonials"510style={{ backgroundColor: COLORS.BS_GREEN_LL }}511>512<Row gutter={[15, 15]}>513<Col md={12}>514<TestimonialComponent testimonial={t1} />515</Col>516<Col md={12}>517<TestimonialComponent testimonial={t2} />518</Col>519<Col md={24} style={{ textAlign: "center" }}>520<Button521onClick={() =>522(window.location.href = join(basePath, "/testimonials"))523}524title={`More testimonials from users of ${siteName}`}525>526More testimonials527</Button>528</Col>529</Row>530</Info>531);532}533534function renderChatGPT() {535if (!openaiEnabled || !onCoCalcCom) return;536return (537<Info538level={LANDING_HEADER_LEVEL}539title="Extensive Generative AI Integration"540icon="robot"541imageComponent={<ChatGPTHelp size="large" tag={"index"} />}542anchor="a-realtimesync"543alt={"Two browser windows editing the same Jupyter notebook"}544style={{ backgroundColor: COLORS.ANTD_BG_BLUE_L }}545>546<Paragraph>547A wide range of{" "}548<A href={DOC_AI}>Generative AI Large Language Models</A> are highly549integrated into {siteName}. This helps you{" "}550<A href={`${DOC_AI}#jupyter-notebooks`}>fix errors</A>, generate code551or LaTeX snippets, summarize documents, and much more.552</Paragraph>553</Info>554);555}556557function renderDemoCell() {558if (!jupyterApiEnabled) return;559560return (561<Info562level={LANDING_HEADER_LEVEL}563title="Many Programming Languages"564icon="flow-chart"565imageComponent={<DemoCell tag={"sage"} style={{ width: "100%" }} />}566anchor="a-realtimesync"567alt={"Two browser windows editing the same Jupyter notebook"}568style={{ backgroundColor: COLORS.YELL_LLL }}569icons={[570{ icon: "julia", link: "/features/julia" },571{ icon: "linux", link: "/features/linux" },572{ icon: "python", link: "/features/python" },573{ icon: "r", link: "/features/r-statistical-software" },574{ icon: "sagemath", title: "SageMath", link: "/features/sage" },575{ icon: "octave", link: "/features/octave" },576]}577>578<Paragraph>579{siteName} supports many{" "}580<A href={"/software"}>programming languages</A>. Edit the demo cell on581the left and evaluate it by pressing "Run". You can also select a582different "kernel", i.e. the programming language that is used to583evaluate the cell.584</Paragraph>585</Info>586);587}588589return (590<>591<ComputeServers />592{renderChatGPT()}593{renderDemoCell()}594{renderSandbox()}595{renderCollaboration()}596<AvailableTools style={{ backgroundColor: COLORS.YELL_LLL }} />597{renderTeaching()}598{renderMore()}599{renderTestimonials()}600{renderAvailableProducts()}601</>602);603}604605606