대형 모델에서의 B-엔드 프론트엔드 코드 생성 지원에 대한 생각과 실천

1. 배경

반복 작업 및 코드 표준: B-엔드 프런트 엔드 코드 개발 과정에서 개발자는 항상 반복 개발의 어려움에 직면하게 됩니다. 많은 CRUD 페이지의 요소 모듈은 기본적으로 유사하지만 여전히 수동으로 개발해야 합니다. 간단한 요소 구성에 시간이 소요되어 비즈니스 요구 사항의 개발 효율성이 , 서로 다른 개발자의 코딩 스타일이 일관되지 않기 때문에 다른 개발자가 민첩한 반복을 시작하는 데 더 많은 비용이 듭니다.

AI는 단순한 두뇌 능력을 대체합니다. 대규모 AI 모델의 지속적인 개발로 AI는 간단한 이해 기능을 갖추고 있으며 언어를 지침으로 변환할 수 있습니다 . 기본 페이지 구축에 대한 일반 지침은 일상적인 기본 페이지 구축 요구 사항을 충족하고 일반 시나리오에서 비즈니스 개발 효율성을 향상시킬 수 있습니다.

2. 생성된 링크 목록

B면 페이지 목록, 양식, 세부정보 등을 모두 생성할 수 있으며, 링크는 대략 다음과 같은 단계로 나눌 수 있습니다.

자연어 입력
대형 모델과 결합하여 지정된 규칙에 따라 해당 시공 정보를 추출합니다.
코드 템플릿 및 AST 출력 프런트엔드 코드와 결합된 빌드 정보

3. 표현 요구

그래픽 구성

보조 코드 생성의 첫 번째 단계는 어떤 종류의 인터페이스를 개발할지 알려주는 것입니다. 이때 우리가 가장 먼저 생각하는 것은 현재 주류인 로우 코드 제품 형태인 페이지 구성 입니다. 다음 그림과 같이 일련의 그래픽 구성:

위의 구성 방법은 일반 시나리오(예: 상대적으로 간단한 배경 논리를 사용하는 CURD 페이지) 또는 특정 비즈니스 시나리오(예: 장소 건설)의 효율성을 향상시키는 데 더 나은 효과가 있습니다. 지속적인 로직 반복이 필요한 비교적 복잡한 요구 사항의 경우 구성이 그래픽 작업을 통해 수행되므로 대화형 디자인에 대한 요구 사항이 더 높고 요구 사항의 복잡성이 점점 더 높아질수록 구성 양식 상호 작용에 대한 특정 비용이 발생합니다. 점점 더 복잡해지고 있으며 유지 관리 비용도 점점 더 높아지고 있습니다. 따라서 페이지 구성에서 프런트 엔드 필드의 사용은 상대적으로 제한 됩니다 .

AI가 직접 코드 생성

AI 생성 코드는 도구 기능 시나리오에서 주로 사용되지만, 회사 내 특정 비즈니스 시나리오의 요구 사항에 대해서는 다음 사항을 고려해야 할 수 있습니다.

사용자 정의 생성: 회사 팀은 자체 기술 스택과 강력한 일반 구성 요소를 보유하고 있으며 이 지식을 사전 교육해야 합니다. 현재 긴 텍스트에 대한 사전 교육 콘텐츠는 단일 세션 주입만 지원하며 토큰 소비가 높습니다. ;
정확성: AI 생성 코드의 정확성 문제는 상대적으로 큽니다. 또한 사전 학습에는 코드 출력 내용이 너무 자세하고 모델 환상이 포함되어 있기 때문에 비즈니스 코드의 실패율이 높습니다. 현재 상대적으로 높으며 정확도는 보조 인코딩을 고려하는 핵심 지표입니다. 이 문제를 해결할 수 없으면 보조 인코딩의 효과가 크게 감소합니다.
불완전하게 생성된 콘텐츠: 단일 GPT 세션의 제한으로 인해 복잡한 요구사항의 경우 코드 생성이 잘려서 생성 성공률에 영향을 미칠 수 있습니다.

자연어를 명령어로

실제로 GPT에는 자연어를 명령어로 변환하는 매우 중요한 기능이 있으며 명령어는 동작입니다. 예를 들어 함수 메서드가 구현되고 입력이 자연어와 내장 언어를 결합한다고 가정합니다. 프롬프트에서는 특정 몇 단어를 안정적으로 출력할 수 있습니다. 이러한 단어를 출력하여 추가 조치를 취할 수 있습니까? 이는 그래픽 구성 에 비해 다음과 같은 장점이 있습니다 .

낮은 학습 역치: 자연어 자체는 인간의 모국어이므로 자신의 생각에 따라 페이지를 설명하기만 하면 됩니다. 물론 설명 내용은 일부 표준을 따라야 하지만 그래픽 구성에 비해 효율성이 높습니다. 대폭 개선되었습니다.
복잡성 블랙박스: 구성 페이지의 복잡성에 따라 그래픽 구성의 복잡성도 증가하며, 이러한 복잡성은 사용자 앞에 한눈에 표시되므로 사용자는 복잡한 구성 페이지 상호 작용에 빠져들게 됩니다. 구성 비용은 점차 증가합니다. ;
Agile iteration: 사용자 측에서 페이지 구성 기능을 추가하려는 경우 대형 모델 기반의 상호 작용 방법은 몇 가지 프롬프트만 추가하면 되지만 그래픽 구성은 빠른 입력을 용이하게 하기 위해 복잡한 형태의 개발이 필요합니다.

여기에 질문이 있을 수 있습니다.

생성된 명령어 정보도 대형 모델의 착각에 시달리지 않을까요? 매번 생성되는 명령 정보가 안정적이고 일관되게 유지되도록 하려면 어떻게 해야 합니까?

자연어를 명령어로 변환하는 것은 다음과 같은 이유로 가능합니다.

긴 텍스트를 주요 정보로 변환하는 것은 요약 콘텐츠에 속하며 요약 시나리오에서 대형 모델의 정확도는 확산 시나리오보다 훨씬 높습니다.
지시 정보는 요구 사항의 핵심 정보만 추출하고 코드 기술 스택에 대한 사전 교육이 필요하지 않기 때문에 프롬프트 내용을 최적화하고 개선함으로써 출력 정확도를 효과적으로 향상시킬 수 있습니다. ;
정확도는 서로 다른 표현 요구사항 입력을 통해 확인할 수 있으며, badCase가 발생하면 최적화 후 해당 badCase에 대한 단일 테스트에 액세스하여 정확도를 확인할 수 있습니다. 정확성이 지속적으로 향상되는지 확인하세요.

최종 정보 변환 결과를 살펴보겠습니다.

코드 지원의 경우 사용자의 요구 설명을 기반으로 PROMPT 처리를 통해 해당 정보를 얻을 수 있습니다. 코드 생성을 위한 기본 정보를 제공합니다.

4. 정보를 코드로 변환

대형 모델(위 예에서는 JSON)을 통해 자연어에 해당하는 코드화 가능한 정보를 얻은 후, 이 정보를 기반으로 코드를 변환할 수 있습니다. 명확한 시나리오가 있는 페이지의 경우 일반적으로 기본 코드 템플릿(목록, 양식, 설명 프레임) + 비즈니스 구성 요소로 나눌 수 있습니다.

변환 과정

코드를 어떻게 개발했나요?

사실 이 단계는 우리가 직접 코드를 개발하는 것과 매우 유사합니다. 요구 사항을 얻은 후 우리의 뇌는 핵심 정보, 즉 위에서 언급한 자연어 변환 명령을 추출한 다음 vscode에서 파일을 생성합니다. 다음 작업을 수행합니다.

먼저 코드 템플릿을 만든 다음 시나리오에 따라 해당 강력한 구성 요소를 도입해야 합니다. 예를 들어 ProTable은 목록에 도입되고 ProForm은 양식에 도입됩니다.

ProTable과 같은 강력한 구성 요소를 기반으로 하며 headerTitle, pageSize 및 기타 목록 관련 정보와 같은 일부 속성을 추가합니다.

수요 설명에 따라 컴포넌트를 소개합니다. 예를 들어 필터 항목에 카테고리 선택이 있는 것으로 인식되면 useColumns에 가져오기 및 내보내기 컴포넌트가 있는 것으로 인식되면 새로운 비즈니스 컴포넌트가 추가됩니다. 수요 설명에 따라 새로운 가져오기 및 내보내기 비즈니스 구성요소가 페이지의 지정된 위치에 추가됩니다.

모의 링크를 가져오고, 요청 레이어를 추가하고, 페이지의 지정된 위치에 도입하세요.

위의 일반적인 코드 삽입 시나리오는 JSON으로 캡슐화할 수 있으며, AST 삽입 또는 문자열 템플릿 교체와 결합된 코드 템플릿을 통해 해당 코드가 생성됩니다.

5. 소스코드 생성

위치

소스 코드 지원은 주로 개발자가 반복 작업을 줄이고 코딩 효율성을 향상시키는 데 도움이 됩니다. 로우 코드 페이지 구축과는 완전히 다른 트랙입니다. 업계 로우코드 구축에도 탁월한 사례가 있습니다. 소스 코드 보조 도구는 사용자가 비즈니스 요구 사항 코드를 최대한 많이 초기화할 수 있도록 설계되었으며, 이후의 수정 및 유지 관리는 코드 수준에서 사용자에게 전달되어 새 페이지의 개발 효율성을 향상시킵니다.

구체적인 기능적 아키텍처는 다음과 같습니다.

6. 구성요소 벡터 검색 및 임베딩

프런트엔드 개발에 있어서 효율성 향상의 핵심은 적은 양의 코드를 개발하는 것입니다. 한편으로는 빠른 페이지 생성과 좋은 컴포넌트 추출이 매우 중요한 부분입니다. 컴포넌트의 도입 링크를 빠르게 최적화하기 위해 벡터를 결합했습니다. 초기화 템플릿 및 재고 코드에서 구성 요소를 찾습니다.

구성요소 벡터 소개 링크

구성요소 정보 입력

컴포넌트 설명 내용 및 컴포넌트 소개 패러다임의 빠른 획득을 지원합니다. 한 번의 클릭으로 컴포넌트를 입력하면 컴포넌트 설명이 벡터 데이터로 변환되어 벡터 데이터베이스에 저장됩니다.

구성요소 벡터 검색

사용자가 설명을 입력하면 설명이 벡터로 변환되어 코사인 유사성을 기반으로 구성 요소 목록과 비교되어 유사도가 가장 높은 TOP N 구성 요소를 찾습니다.

빠른 구성 요소 삽입

사용자는 재고 코드에서 일치도가 가장 높은 구성 요소를 설명하여 빠르게 검색하고 Enter 키를 눌러 삽입할 수 있습니다.

7. 향후 전망

구성 요소 포함 템플릿: 현재 구성 요소는 소스 코드 페이지를 결합하여 생성되고 구성 요소의 동적 일치 및 템플릿에 포함을 지원하는 벡터 검색을 이미 지원합니다.
기존 코드 편집 및 생성: 현재는 새 페이지에 대한 소스 코드 생성만 지원되며, 향후 기존 페이지에 대한 로컬 코드 추가도 지원될 예정입니다.
코드 템플릿 파이프라인: AST의 코드 작업 도구는 자연어와 코드 작성을 더욱 연결하여 장면 확장 효율성을 향상시킵니다.

*텍스트/ 하나님의 뜻

이 기사는 Dewu Technology의 원본입니다. 더 흥미로운 기사를 보려면 Dewu Technology 공식 웹사이트를 참조하세요.

Dewu Technology의 허가 없이 전재하는 것을 엄격히 금지하며, 그렇지 않을 경우 법률에 따라 법적 책임을 추궁할 것입니다!