Merge pull request #133 from kookmin-sw/web-main

Web main
kookmin-sw · May 22, 2024 · ed33bd5 · ed33bd5
2 parents cf570c8 + afd308c
commit ed33bd5
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 59 deletions.
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -15,8 +15,9 @@ import { ColorSchemeScript, MantineProvider, createTheme } from '@mantine/core';
 import { NavigationProgress } from '@mantine/nprogress';
 
 export const metadata: Metadata = {
-  title: 'StackOrderFlow - 자연어 기반 AWS CloudFormation 템플릿 생성 서비스',
-  description: '자연어 기반 AWS CloudFormation 템플릿 생성 서비스',
+  title:
+    'StackOrderFlow - 자연어 기반 AWS CloudFormation 템플릿 생성 AI 어시스턴트',
+  description: '자연어 기반 AWS CloudFormation 템플릿 생성 AI 어시스턴트',
   icons: {
     icon: '/icon.png',
   },

diff --git a/frontend/components/CodeSpaceEditor/codespace.module.css b/frontend/components/CodeSpaceEditor/codespace.module.css
@@ -9,13 +9,8 @@
 
 .inner {
   position: relative;
-  padding-top: rem(200px);
-  padding-bottom: rem(120px);
-
-  @media (max-width: $mantine-breakpoint-sm) {
-    padding-bottom: rem(80px);
-    padding-top: rem(80px);
-  }
+  padding-top: rem(20px);
+  padding-bottom: rem(12px);
 }
 
 .code-wrapper {

diff --git a/frontend/components/CodeSpaceEditor/index.tsx b/frontend/components/CodeSpaceEditor/index.tsx
@@ -19,7 +19,6 @@ import {
 import { useDisclosure } from '@mantine/hooks';
 import { IconCheck, IconCopy, IconX } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
-import { NavigationProgress, nprogress } from '@mantine/nprogress';
 
 const code = `{
   "AWSTemplateFormatVersion": "2010-09-09",
@@ -168,26 +167,22 @@ const code = `{
 }
 `;
 
-export default function CodeSpaceEditor() {
+export default function CodeSpaceEditor({
+  template = code,
+}: {
+  template?: string;
+}) {
   const [visible, { toggle }] = useDisclosure(false);
 
-  const [loading, setLoading] = useState(true);
-  const [valid, setValid] = useState(false);
-
-  useEffect(() => {
-    if (loading) {
-      nprogress.start();
-    } else {
-      nprogress.complete();
-    }
-  }, [loading]);
+  const [loading, setLoading] = useState(false);
+  const [valid, setValid] = useState(true);
 
   return (
     <div className={classes.wrapper}>
-      <Container size={700} className={classes.inner}>
+      <Container className={classes.inner}>
         <Box pos="relative" p={8} className={classes['code-wrapper']}>
           <Flex justify="space-between" align="center">
-            <CopyButton value="https://mantine.dev" timeout={2000}>
+            <CopyButton value={template} timeout={2000}>
               {({ copied, copy }) => (
                 <Tooltip
                   label={copied ? 'Copied' : 'Copy'}
@@ -239,7 +234,7 @@ export default function CodeSpaceEditor() {
             <Editor
               height="400px"
               defaultLanguage="json"
-              defaultValue={code}
+              defaultValue={template}
               options={{
                 fontSize: '14px',
                 minimap: {
@@ -251,11 +246,11 @@ export default function CodeSpaceEditor() {
             />
           </Box>
 
-          <Group justify="center" mt={8}>
+          {/* <Group justify="center" mt={8}>
             <Button onClick={toggle}>Toggle overlay</Button>
             <Button onClick={() => setLoading(!loading)}>Toggle Loading</Button>
             <Button onClick={() => setValid(!valid)}>Check valid</Button>
-          </Group>
+          </Group> */}
         </Box>
       </Container>
     </div>

diff --git a/frontend/components/LandingSection/FeatureGrid/index.tsx b/frontend/components/LandingSection/FeatureGrid/index.tsx
@@ -12,48 +12,69 @@ import {
   IconUser,
   IconMessage2,
   IconLock,
+  IconSocial,
+  IconFilter,
+  IconCodeDots,
+  IconRepeat,
+  IconHammer,
 } from '@tabler/icons-react';
 import classes from './featuregrid.module.css';
 
 export const FEATURE = [
   {
-    icon: IconGauge,
-    title: '진입 장벽 제거',
-    description:
-      '복잡한 CloudFormation의 문법과 방대한 문서 학습 필요 없이, 모든 사용자가 클라우드 리소스를 쉽게 관리할 수 있습니다.',
+    icon: IconCodeDots,
+    title: 'Template Generator',
+    description: (
+      <>
+        RAG 기법, 프롬프트, Validation API를 사용하여 정확한 템플릿 파일을
+        생성합니다.
+        <br />
+        템플릿 파일이 유효하지 않은 경우, 에러 메세지를 기반으로 템플릿 파일을
+        재생성하여 정확도를 향상합니다.
+      </>
+    ),
   },
   {
-    icon: IconUser,
-    title: '자연어 분석',
+    icon: IconFilter,
+    title: 'Validation API',
     description:
-      '사용자가 자연어로 필요한 인프라를 설명하면, AI가 이를 분석하여 필요한 CloudFormation 템플릿을 자동으로 생성합니다.',
+      'AWS CLI의 validate-template 명령어를 기반한 자체 Validation API를 통해 템플릿 파일의 높은 신뢰성을 보장합니다.',
   },
+
   {
-    icon: IconCookie,
-    title: 'Secure by default',
+    icon: IconSocial,
+    title: 'Template Hub',
     description:
-      'Although it still can’t fly, its jumping power is outstanding, in Alola the mushrooms on Paras don’t grow up quite right',
+      '생성한 템플릿을 공유하고, 다른 사용자가 생성한 템플릿 파일을 AWS 리소스 기반으로 검색할 수 있습니다.',
   },
 ];
 
 export const DIFFERENCE = [
   {
-    icon: IconLock,
-    title: 'CloudFormation 특화',
+    icon: IconHammer,
+    title: '생산성 증가',
     description:
-      'RAG 기술을 적용하여 사용자의 요구에 가장 관련성 높은 정보를 검색하고 이를 바탕으로 템플릿을 생성합니다.',
+      '7,000개가 넘는 AWS CloudFormation의 문서를 읽고 이해하는 데 약 18일이 소요됩니다. StackOrderFlow를 사용하면 20초 안에 AWS 리소스를 배포할 수 있습니다.',
   },
   {
     icon: IconGauge,
-    title: 'Template Hub',
-    description:
-      '사용자들은 Template Hub를 통해 생성한 템플릿을 공유할 수 있으며, 다른 사용자들의 프롬프트와 템플릿을 참고할 수 있습니다.',
+    title: '정확도 증가',
+    description: (
+      <>
+        StackOrderFlow는 GPT-4 대비 <strong>65% 높은 정확도</strong>를
+        보여줍니다.
+        <br />
+        또한, 생성된 템플릿 파일은{' '}
+        <strong>사용자 요구사항의 94% 이상을 충족</strong>하여 요청된 내용을 잘
+        반영합니다.
+      </>
+    ),
   },
   {
-    icon: IconCookie,
-    title: '유효성 검증',
+    icon: IconRepeat,
+    title: '재사용성 증가',
     description:
-      '템플릿 파일의 유효성 검증 기능을 통해서 신뢰도가 높은 템플릿 파일을 생성합니다.',
+      '템플릿 허브에서 다른 사용자가 생성한 템플릿 파일을 검색하고 활용함으로써 재사용성을 높일 수 있습니다.',
   },
 ];
 
@@ -97,13 +118,13 @@ export default function FeaturesGrid() {
           gradient={{ from: 'blue', to: 'cyan' }}
           inherit
         >
-          Feature
+          Primary Features
         </Text>{' '}
       </Title>
 
       <Container size={700} p={0}>
         <Text size="sm" className={classes.description}>
-          Stack OrderFlow는 다음과 같은 특징을 가지고 있습니다.
+          StackOrderFlow는 다음과 같은 주요 기능을 가지고 있습니다.
         </Text>
       </Container>
 
@@ -124,13 +145,13 @@ export default function FeaturesGrid() {
           gradient={{ from: 'blue', to: 'cyan' }}
           inherit
         >
-          Differences
+          Anticipated benefits
         </Text>{' '}
       </Title>
 
       <Container size={700} p={0}>
         <Text size="sm" className={classes.description}>
-          왜 다른 챗봇이 아닌 Stack OrderFlow를 사용해야 할까요?
+          StackOrderFlow는 다음과 같은 기대 효과를 가지고 있습니다.
         </Text>
       </Container>
 

diff --git a/frontend/components/LandingSection/index.tsx b/frontend/components/LandingSection/index.tsx
@@ -24,14 +24,15 @@ export default function LandingSection() {
             fully featured
           </Text>{' '}
           React components and hooks library */}
-          쉽고, 빠르게, 실수없이 <br />
-          AWS를 시작하세요
+          쉽게, 빠르게, 부담없이 <br />
+          AWS 리소스를 관리하세요
           {/* <br/> AWS CloudFormation <br/> 템플릿을 생성해보세요. */}
         </h1>
 
         <Text className={classes.description} color="dimmed">
-          필요한 리소스들을 입력하세요. 사용자의 자연어 입력을 분석하여 AWS
-          CloudFormation 템플릿을 자동으로 생성해 줍니다.
+          자연어를 통해 생성된 CloudFormation 템플릿을 통해
+          <br />
+          원하는 클라우드 인프라를 구성하세요.
         </Text>
 
         <Group className={classes.controls}>
@@ -69,9 +70,9 @@ export default function LandingSection() {
       <Container size={700} className={classes.inner}>
         <CloudFormationDescription />
       </Container>
-      <Container size={700} className={classes.inner}>
+      {/* <Container size={700} className={classes.inner}>
         <Usage />
-      </Container>
+      </Container> */}
     </div>
   );
 }
diff --git a/frontend/components/TemplateHub/HubItems/index.tsx b/frontend/components/TemplateHub/HubItems/index.tsx
@@ -15,6 +15,7 @@ import {
   Grid,
   SimpleGrid,
   Paper,
+  Flex,
 } from '@mantine/core';
 import {} from '@tabler/icons-react';
 import Link from 'next/link';
@@ -99,6 +100,17 @@ export default function HubItems({ templates }: { templates: any[] }) {
     </Card>
   ));
 
+  if (templates.length === 0) {
+    return (
+      <Flex mt={20} justify="center" align="center" direction="column">
+        <Text>해당 리소스를 사용하는 템플릿 파일이 없어요.</Text>
+        <Button mt={12} onClick={() => router.push('/generator')}>
+          템플릿 만들러가기
+        </Button>
+      </Flex>
+    );
+  }
+
   return (
     <SimpleGrid
       mt={20}

diff --git a/frontend/components/UsePage/Result/index.tsx b/frontend/components/UsePage/Result/index.tsx
@@ -23,6 +23,7 @@ import axios from 'axios';
 import { useAuth } from '@/context/AuthContext';
 import { useRouter } from 'next/navigation';
 import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import CodeSpaceEditor from '@/components/CodeSpaceEditor';
 
 interface IResult {
   prompt: string;
@@ -97,7 +98,7 @@ export default function Result({ template }: any) {
         결과
       </Text>
 
-      <JsonInput
+      {/* <JsonInput
         mt={7}
         value={value}
         onChange={setValue}
@@ -106,7 +107,9 @@ export default function Result({ template }: any) {
         formatOnBlur
         autosize
         minRows={4}
-      />
+      /> */}
+
+      <CodeSpaceEditor template={value} />
 
       <Text size="xl" fw={500} mt="lg">
         설명

diff --git a/frontend/components/UsePage/UserInput/Index.tsx b/frontend/components/UsePage/UserInput/Index.tsx
@@ -50,8 +50,10 @@ export default function UserInput({
       </Text>
       <Text size="sm" c="dimmed" lh={1.6}>
         프로젝트에 적용되어야 하는 특정 제약사항이나 필요 조건이 있다면, 이를
-        분명히 명시해 주세요. 예를 들어, 특정 지역에서만 리소스를 생성해야
-        하거나, 비용 제한이 있는 경우 등입니다.
+        분명히 명시해 주세요.
+        <br />
+        예를 들어, 특정 지역에서만 리소스를 생성해야 하거나, 비용 제한이 있는
+        경우 등입니다.
       </Text>
 
       <Textarea