Help Center> FunctionGraph> Best Practices> Building an AI Application for Identifying Pornographic Images> Building a Frontend Function
View PDF

Building a Frontend Function

You can deploy a frontend page on OBS as a static resource, and use OBS to host your static website with a customized domain name.

You can download and use the frontend program package provided in this example.

Downloading the Program Package

Download the frontend program package functiongraph-demo.zip, and decompress it, as shown in Figure 1.

Figure 1 Program package directory

In the /functiongraph/assets/config/apis.json file, change the value of checkImage into the URL (https://d237af6bc4214cc383b5f2b40a3af234.apigw.cn-north-1.huaweicloud.com/AIDemo) of the APIG trigger created in Creating an APIG Trigger for the Backend Function, as shown in Figure 2.

Figure 2 Changing the value of checkImage

Uploading the Code Files to an OBS Bucket

Log in to the OBS console, click bucket obs-aidemo created in Creating an OBS bucket, and upload the code files to the bucket, as shown in Figure 3.

Figure 3 Frontend program package directory

Setting Static Website Hosting

  1. On the obs-aidemo page, choose Static Website Hosting, and click Disabled, as shown in Figure 4.
    Figure 4 Static website hosting
  2. In the Static Website Hosting dialog box, set the hosting information according to Figure 5.
    • Click Use this bucket to host a website.
    • For Default Home Page, enter index.html.
    • Leave other parameters blank.
    • Record the static website address, for example: https://obs-aidemo.obs-website.cn-north-1.myhuaweicloud.com.
    Figure 5 Static website hosting configurations
  3. Click OK.

Configuring an OBS CORS Rule

  1. On the CORS rule page of the obs-aidemo bucket, click CORS Rules. The CORS rule configuration page is displayed, as shown in Figure 6.
    Figure 6 Configuring an OBS CORS rule
  2. On the CORS rule configuration page, click Create. The CORS rule creation page is displayed, as shown in Figure 7.
    • For Allowed Origin, enter an asterisk (*).
    • For Allowed Method, select all methods.
    • For Allowed Header, enter an asterisk (*).
    • For Exposed Header, enter the following headers. 
      ETag
x-obs-request-id
Content-Type
Content-Length
Cache-Control
Content-Disposition
Content-Encoding
Content-Language
Expires
x-obs-id-2
x-reserved-indicator
x-obs-version-id
x-obs-copy-source-version-id
x-obs-storage-class
x-obs-delete-marker
x-obs-expiration
x-obs-website-redirect-location
x-obs-restore
x-obs-version
x-obs-object-type
x-obs-next-append-position
Access-Control-Allow-Origin
    • For Cache Duration (s), enter 100.
    Figure 7 Creating a CORS rule

Enabling API CORS

Log in to the API Gateway console and enable CORS for API_AIDemo created in 3. For details, see Enabling CORS.